|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
July 23rd, 2004, 05:14 AM
|
|||
|
|||
|
Negative margins and floating divs
I'm redoing the layout of my site (www.brohawk.com) using floating divs with negative margins to produce a fluid left column and a fixed right column. I followed an article on A List Apart for the basics and got it working fairly nicely.
As a matter of fact, the site works beautifull in Mozilla/Firefox and with minmal errors in NS7. I've even got all but the forums working in Opera. I haven't even begun to work on making it IE compliant. Saving the worst for last. Anyhow, on all the pages except the forums, the divs line up perfectly. However, on the forums page, the right div doesn't stay up top, instead it wraps around under the left div. However, I still get all the space to the right of the left div where the right one should go. Anybody with Opera should be able to check it out and see what I mean. Anyhow, can anybody tell me why it won't float properly on that one page, but it works on all the others?
|
|
#2
July 23rd, 2004, 09:51 AM
|
||||
|
||||
|
Assuming you want a fixed width (180px) right column, and you want the forum column to occupy the rest of the viewport, try this as a basic layout;
Code:
—Styles—
#menucolumn {
float: right;
width: 180px;
margin-right: 2px;
border: thin solid #333;
background-color: #eee;
display: inline; /*IE hack for doubled margin. This bug only occurs when the float
margin goes in the same direction as the float and is trapped directly
between the float and the inside edge of the container box. Hey, it's
an IE thing.*/
}
#maincolumn {
margin: 0 186px 0 2px;
border: thin solid #333;
}
—HTML—
<div id="menucolumn">
<!-- menu stuff -->
</div> <!--end menucolumn -->
<div id="maincolumn">
<!-- forum tables go here -->
</div> <!-- end maincolumn -->
cheers, gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing. My html and css workshop, demos and tutorials. Ask a better question, get a better answer.
|
|
#3
July 23rd, 2004, 02:05 PM
|
|||
|
|||
|
Thanks a ton! I had to make a few layout changes to accomodate, but that worked great.
Now if only I could get the damn site to work in IE. 
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > Negative margins and floating divs |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
