Jump to content

css layout problem using div tags


Recommended Posts

Hi,Am having a little trouble creating 2 divs so they are side by side inside a container with set width. The HTML looks like this:<div id="contenttop"></div><div id="contentmiddle"><div class="set-size"><div class="column-580 float-left">sfhsfhs</div><div class="column-400 float-right">sfhsfh</div></div></div><div id="contentbottom"></div> and the CSS is as follows/*<-- column system settings -->*/.set-size {width:980px;margin:0 auto;}.column-580 {width:580px;}.column-400 {width:400px;}/*<-- content -->*/#contenttop { background: url(../images/content_top.png) no-repeat; width: 980px; height: 30px; margin-top:9px;}#contentmiddle { background: url(../images/content_middle.png) repeat-y;}#contentbottom { background: url(../images/content_bottom.png) no-repeat; width:980px; height:30px;} however for some reason the divs dont seem to go side by side, but undernaeah each other. Basically, i want to have one div on the left hand side with some content (the 580px size div) and the other div with content on the right hand side (the 400px size div) Have inserted a picture of how it looks within dreamweaver and you can see the divs are not side-by-side, but go underneath each other. Any help would be greatly appreciated. Regards,James layoutnew.jpg

Link to post
Share on other sites

ok, after fiddeling around with the CSS, i managed to get it working. I forgot to add the .float-left {float:left !important;} (and the right) within the CSS. I also removed the background of the contentmiddle repeat section (which was a PNG of 980wide by 10px high) in both the CSS and HTML and added a background left (520px wide and 10px high) and right (460px wide and 10px high) into each. Thus my HTML now looks like: <div id="contenttop"></div><div class="set-size"><div class="column-490 float-left">sfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs</div><div class="column-400 float-right">sfhsfhsfhsfhs<br />sfhsfhs<br />sfhsfhs<br />sfhsfhs</div></div><div class="clear"></div><div id="contentbottom"></div> and the CSS looks like: /*<-- column system settings -->*/.float-left {float:left !important;}.float-right {float:right !important;}.set-size {width:980px;margin:0 auto;}.column-490 {width:490px;}.column-400 {width:400px;}/* additional stylization of 980 grid system columns */.column-490.float-left { padding-left:30px; background:url(../images/content_left.png) repeat-y;}.column-400.float-right { padding-right:30px; padding-left:30px; background:url(../images/content_right.png) repeat-y;}/*<-- content -->*/#contenttop { background: url(../images/content_top.png) no-repeat; width: 980px; height: 30px; margin-top:9px;}.clear{clear:both;font-size:0;line-height:0;display:block;}#contentbottom { background: url(../images/content_bottom.png) no-repeat; width:980px; height:30px;} And the resulting layout image looks like this: (see pic below)My question now is, if i have different sized content in either the left on right div, how do i automatically make sure the background PNG fills the entire section of whichever is the smaller, until it reaches the class <clear> tag. Regards,James layoutnew2.jpg

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...