Forum Moderators: not2easy
have been trying to convert my table design into full css, but having some problmes, not sure if im doing anyhting wrongm, or whther it is a browser bug. what im trying to ahieve is this:
---------------------
¦ banner ¦
---------------------
¦ 2nd menu ¦
---------------------
¦ ¦ ¦ 1 = picture
¦ 1 ¦ main ¦ 2 = main menu
----- content ¦
¦ 2 ¦ ¦
¦ ¦ ¦
---------------------
¦ footer ¦
---------------------
all the sections above are divs, the top two giving no problems as following the flow. the problems seems to be 1 and 2 and the main content.
this is the css ive been using. i get what i want in ie, but in firefox i get the main content just after the second menu, then going on top of 1 and 2. any sugestions would be appreciated, im not to sure about the rules of positioning as every articles sugests something different.
#picdiv {
padding:0px;
float:left;
margin-top:px;
margin-left:px;
background-image:url('wolfback.jpg');
background-position: 0 0 ;
background-repeat:no-repeat;
border-collapse:#;
border: #;
width: 100px;
height: 189px;
clear:left;
}
#maincontent {
background-color:#203854;
border-collapse: collapse;
border-left:1px solid #000000;
padding:0px;
height:auto;
margin-top:0px;
margin-left:#;
width:549px;
vertical-align:top;
position:absolute;
}
#mainmenu {
border-right: 0px solid #000;
padding: 0 0 0 0;
float:left;
clear:both;
margin-bottom: 0em;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
font-size: 10px;
text-align: right;
background-color: #19314d;
color: #000000;
width: 100px;
}
[edited by: SuzyUK at 5:08 pm (utc) on Mar. 1, 2005]
[edit reason] formatting [/edit]
...and the 'bug' in my css, the content are in firefox does not clear of the two divs (thus coming on top of them) to the left, while it does that in ie.
In the code, floated elements always have to come before elements they will float next to. With the content div before one of your floated boxes, at least that one box will appear beneath the content. So if you plan to float the two left <div>s the source order must be...
<div id="picmenu">
</div>
<div id="mainmenu">
</div>
<div id="maincontent">
</div>
You've attempted to use absolute positioning on the #maincontent <div>, but this is both not the best choice and not properly implemented in your code. When you set an element to position:absolute, you then have to give it position values (top: Ypx; left:Xpx) to offset it from it's containing block. WIthout those values, it leaves the box where it is on the page, rendering the position:absolute useless and simultaneously pulling it out of the flow so that other elements cannot interact with it.
One choice you could use would be to leave the content as a normal element in the flow. Give it a margin-left equal to the width of your left floated <div>s, make sure it comes AFTER the left <div>s in the source and it ought to render how you want.
If this doesn't work how you expect it to, or if the results do not meet some other criteria for your site, I suggest looking at the following resources on css-positioning...
Bluerobot.com
Position Is Everything.net
A List Apart.com
Search on any of those sites for "Two Column Layout."
One other minor point about your CSS...you've set vertical-align to top in the #maincontent <div>. Vertical align is an inline property in CSS, meaning that it aligns the contents of an inline box vertically within that box. Inline boxes are things like <span> and <em> tags, not big things like <div>s or <p>s, which are considered block level elements. If your goal with vertical-align was to get the text to mash up to the top of the <div>, vertical-align's not going to do it.
i have tried setting the margin left on the main content div, but this gives me a error in ie, as it calculates tehmargin from where the flaoted divs end, that is making the margin double of what i want to.
but i will try ur sugestions properly and report back, i have now made it to work somehow using abolute positioning on the flaoted divs. so the content area wrapsa round it. one thing tough, how do i set the height of the contetn to be 100% but without overflowing the container div? if iuse overflow: invisible or something like that then the contetn will also disapear right?
how do i set the height of the contetn to be 100% but without overflowing the container div
Does the container have it's height explicitly set? Do you really need it to if it does? If not, get rid of the height setting (or set it to auto). Without a height setting, it should expand to hold your content <div>, no matter how big. The exception would be if (a) the content div is floated or (b) the content div is absolutely positioned.
If the content div is floated, float the container div itself. This forces the container to expand to hold the floated content. If the content is absolutely positioned, I don't think there is anything you can do. Absolutely positioned elements are removed completely from the flow and therefor are not allowed to play with the other elements (no interaction), so even containing divs cannot contain them.
i have tried setting the margin left on the main content div, but this gives me a error in ie, as it calculates tehmargin from where the flaoted divs end, that is making the margin double of what i want to.
If this is happening in your original layout with the floats, the problem may be an IE display bug that is easy to fix. It's called the Doubled Margin Bug and happens when you take a floated element and apply a margin to that element on the same side as it's float (so if a div with a float: left gets a margin-left of 50px, it actually displays a margin of 100px, see?). The fix is really easy, just put display:inline; on the floating element. See this thread for an even better discussion: [webmasterworld.com...] .
sorry abt the late reply, been offline for a few days..
thanks again, th eie bug problem seems to be working..i think there is alot of css cleaning up to do tough...lol
tought it was a ie bug, couldnt get myself to blieve it was firefox..
thanks again
kumar
