•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the Site Layout and Usability section within the Web Development category of DaniWeb, a massive community of 402,934 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,974 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our Site Layout and Usability advertiser: Programming Forums
Views: 6433 | Replies: 5
 |
•
•
Join Date: Feb 2005
Location: Braintree, UK
Posts: 1,165
Reputation: 
Rep Power: 7
Solved Threads: 59
Hi all,
I'm trying to create a three column CSS based HTML template.
Here's the XHTML: TriCol_Liq.htm
and here's the CSS: TriCol_Liq.css
The centre div should be liquid and expand/contract to fill the space between the right and left div depending on the size of the users browser window. It displays perfectly in Firefox, but IE stuffs some padding in between the centre div and the right div element. Does anyone know how I can tweek my CSS to make IE play along?
I'm trying to create a three column CSS based HTML template.
Here's the XHTML: TriCol_Liq.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Tripple Column Layout Liquid</title> <link rel="stylesheet" type="text/css" href="TriCol_liq.css" /> </head> <body> <!--START PAGE CONTAINER --> <div class="container"> <!--START HEADER --> <div class="header"> HEADER </div> <!--END HEADER --> <!--START LEFT COLUMN --> <div class="left"> LEFT </div> <!--END LEFT COLUMN --> <!--START CENTER COLUMN--> <div class="center"> <div class="center_content"> CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER CENTER </div> </div> <!--START PENTER COLUMN --> <!--START RIGHT COLUMN --> <div class="right"> RIGHT </div> <!--END RIGHT COLUMN --> <!--END PAGE CONTAINER --> </div> </body> </html>
and here's the CSS: TriCol_Liq.css
body{
margin: 0px 0px 0px 0px;
background-color: #ffcc66 ;
}
div.container{
width: 100%;
}
div.header{
position: absolute;
width: 100%;
height: 100px;
top: 0px;
left: 0px;
background-color: #ffcc66;
}
div.left{
position: absolute;
width: 160px;
height: 400px;
top:100px;
left: 0px;
background-color: #ffff33;
}
div.center{
position: absolute;
height: 400px;
top: 100px;
left: 160px;
right: 160px;
background-color: #ffff66;
}
div.center_content{
padding: 25px 25px 25px 25px;
}
div.right{
position: absolute;
width: 160px;
height: 400px;
top: 100px;
right: 0px;
background-color: #ffff99;
}The centre div should be liquid and expand/contract to fill the space between the right and left div depending on the size of the users browser window. It displays perfectly in Firefox, but IE stuffs some padding in between the centre div and the right div element. Does anyone know how I can tweek my CSS to make IE play along?
•
•
Join Date: Jul 2004
Location: Wales
Posts: 735
Reputation:
Rep Power: 6
Solved Threads: 17
Master Poster
on div.center change the absolute positioning to be margins
div.center{
height: 400px;
margin-top: 100px;
margin-left: 160px;
margin-right: 160px;
background-color: #ffff66;
}
That should work.
IE doesn't support positioning from opposite sides.
div.center{
height: 400px;
margin-top: 100px;
margin-left: 160px;
margin-right: 160px;
background-color: #ffff66;
}
That should work.
IE doesn't support positioning from opposite sides.
emdevelopments - accessible web design | HiJackThis
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
•
•
Join Date: Feb 2005
Location: Braintree, UK
Posts: 1,165
Reputation:
Rep Power: 7
Solved Threads: 59
•
•
•
•
Originally Posted by DaveSW
on div.center change the absolute positioning to be margins
div.center{
height: 400px;
margin-top: 100px;
margin-left: 160px;
margin-right: 160px;
background-color: #ffff66;
}
That should work.
IE doesn't support positioning from opposite sides.
•
•
Join Date: Jul 2004
Location: Wales
Posts: 735
Reputation:
Rep Power: 6
Solved Threads: 17
Master Poster
No problem, but in that case you might get a box model problem in moz/IE - check it out, if it appears as different heights let me know and I'll tell you how to fix it.
emdevelopments - accessible web design | HiJackThis
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
•
•
Join Date: Feb 2005
Location: Braintree, UK
Posts: 1,165
Reputation:
Rep Power: 7
Solved Threads: 59
•
•
•
•
Originally Posted by DaveSW
No problem, but in that case you might get a box model problem in moz/IE - check it out, if it appears as different heights let me know and I'll tell you how to fix it.
Yes it does appear flush in IE but longer in mozilla at 500px.
•
•
Join Date: Jul 2004
Location: Wales
Posts: 735
Reputation:
Rep Power: 6
Solved Threads: 17
Master Poster
yeah what's happening is that IE subtracts margins and padding from the width, wheras the official box model (as used by Mozilla) adds them.
So what you need to do is nest two divs, i.e.
<div><div>
then apply your margin-top to the top one, and your height to the second one.
That then avoids the box model totally.
There are numerous hacks for getting IE to read one value and Moz the other, but there's no guarantee on their effectiveness with future browsers.
So what you need to do is nest two divs, i.e.
<div><div>
then apply your margin-top to the top one, and your height to the second one.
That then avoids the box model totally.
There are numerous hacks for getting IE to read one value and Moz the other, but there's no guarantee on their effectiveness with future browsers.
emdevelopments - accessible web design | HiJackThis
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
Portfolio: Fire Equipment, Conveyors, Tools | Whitworth Spanner | Alarm Installers Bath | Physical Security Solutions | Surveyor | Pine Range | Unique Air Charter | Apollo Tiling in Bridgend
|
•
•
•
•
•
•
•
•
DaniWeb Site Layout and Usability Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- Create a cross-browser compatible, single-level, drop-down menu (Web Design Tutorials)
- Help wih CSS (HTML and CSS)
- Style properties are ignored by Mozilla browser... (ASP.NET)
Other Threads in the Site Layout and Usability Forum
- Previous Thread: Mobile Phone Messaging
- Next Thread: Recommendations for Web Site creation
