Multiple Div's aligned right or left [Archive]

Crowds

06-13-2005, 05:16 PM

I have a three column css site that I am working on. So far its going ok but I would like to enter more Div's in order to get some separation between either adverts or news items. However when I have tried to do this in the past the divs get mixed up and any extras I create (aside from my left, right and middle Div's) end up within my middle or content Div's. I have tried moving the code so that it occurs both before and after the content Div but it always appears inside of it. Here is a link to a roll-over image with a rough preview of the layout I am trying to create.Layout (http://www.surviving-chesterfield.co.uk/test/test2.htm)

And here is the site I am trying to incorporate it into.
Surviving Chesterfield (http://www.surviving-chesterfield.co.uk/)

I did find a site before that had tutorials on how to do this but I cannot for the life of me find it again (Bookmark :o Doh!).
How do I go about creating this look ?
Cheers
Crowds

Riboflavin

06-13-2005, 05:49 PM

I think what would solve your problem is if you floated all the elements. Try applying float:left; to all the elements in your CSS.

Crowds

06-13-2005, 05:55 PM

What about my right hand column? wouldn't that make it appear on the left?

_Aerospace_Eng_

06-13-2005, 06:31 PM

no floated elements will stay next to each other unless you use clear:left; clear:right; or clear:both; You'll need to place sidebar-b after your content. Float sidebar-a,content, and sidebar-b divs to the left.

Crowds

06-13-2005, 06:35 PM

Ok cool, thanks very much to both of you I will give it a go now :thumbsup:

Crowds

06-13-2005, 07:24 PM

Mmmm hasn't worked. I get differnt results in IE and Firefox but both display wrong.
Here it is with the float left on sidebar a and b and content.
Test (http://www.surviving-chesterfield.co.uk/test/indextest.htm)

_Aerospace_Eng_

06-13-2005, 10:05 PM

partially because your had left and right margins on the content div.Try this for the content css
#content {
padding: 10px;
background-color: rgb(213, 219, 225);
background-image: url(../images/midtopleft.jpg);
background-repeat: no-repeat;
float: left;
width:533px;
}

Crowds

06-14-2005, 07:34 PM

Sorry for the late reply.
Thanks Aerospace_Eng. That has indeed sorted out the problem but alas it has caused the content box to stop resizing with the browser and is no longer 'liquid' :(
Test (http://www.surviving-chesterfield.co.uk/test/indextest.htm)

lonechicken

06-15-2005, 03:50 PM

This example helped me out (things like this make me question my sanity in trying to use CSS for everything instead of just tables). It may not start out quite like what you're looking for, but might be applied to your layout:

http://www.tjkdesign.com/articles/challenge/3cols/default.asp

Crowds

06-15-2005, 07:55 PM

Thanks Lonechicken, some useful stuff there but couldn't find anything that could quite help with my problem. I have However got things 99% sorted :)
I went back to my initial css and put back the margin-left: 215px; and margin-right: 215px; for my content Div. For my right side Div I created 2 more Div's called .adcontainer and .sidebarcontainer. I used the sidebarcontainer to hold both the sidebar-b and the .adcontainer and I put in a clear: both; with the adcontainer. I created a table within the adcontainer div and a layout cell so I could centre things easily (easy for someone who is coming from a table and cells background :) ) and then placed the item I wanted within this and all seems fine...... however in IE 6 it seems that some of this new div is appearing over the top of my centre content. It can be seen as part of the .adcontainer's white background just clipping it slightly. What's going on there? how can I prevent this?
Here's the new CSS
/* CSS Document */
#bannerimage {
background-image: url(../images/titlespacer.png);
width: auto;
background-repeat: repeat-x;
}
#container {
width: 100%;
\width: 100%;
w\idth: 100%;
height: 100%;
margin: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#bannerfade {
width: 100%;
\width: 100%;
w\idth: 100%;
height: 8px;
margin: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
background-image: url(../images/bannerfade.jpg);
background-repeat: repeat-x;
}

#content {
padding: 10px;
margin-left: 215px;
margin-right: 215px;
background-color: rgb(213, 219, 225);
background-image: url(../images/midtopleft.jpg);
background-repeat: no-repeat;
}

#topimage {
padding: 5px;
margin-left: 215px;
margin-right: 215px;
background-color: rgb(213, 219, 225);
}
#sidebar-a {
float: left;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-right: 5px;
padding: 5px;
background-color: #FFFFFF;
}

#sidebar-b {
float: right;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
margin-left: 5px;
padding: 5px;
background-color: rgb(235, 235, 235);
background-image: url(../images/rnavleft.jpg);
background-repeat: no-repeat;
}

.adcontainer {
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;
height: 160px;
clear: both;
}
#footer {
clear: both;
padding: 5px;
margin-top: 5px;

background-color: rgb(213, 219, 225);
}
#H1 { color: #5e89ae; font-size: x-large; font-weight: bold }
.sidebarbcontainer {
background-color: #FFFFFF;
float: right;
width: 200px;
\width: 210px;
w\idth: 200px;
margin: 0;

}

And the relavant area of html
<div class="sidebarbcontainer">
<div id="sidebar-b">  
<table border="0" cellpadding="0" cellspacing="0" width="205">


<tr>
<td width="25" height="1"><img src="../images/fw/spacer.gif" alt="" name="undefined_3" width="25" height="1" border="0" /></td>
<td width="150"><img src="../images/fw/spacer.gif" alt="" name="undefined_3" width="150" height="1" border="0" /></td>
<td width="25"><img src="../images/fw/spacer.gif" alt="" name="undefined_3" width="25" height="1" border="0" /></td>
<td width="4"><img src="../images/fw/spacer.gif" alt="" name="undefined_3" width="1" height="1" border="0" /></td>
<td width="1"></td>
</tr>
<tr>
<td rowspan="4" valign="top"> </td>
<td rowspan="2" valign="top"><a href="../map1.htm?client=public&X=440000.673321805&Y=370000.276166004&width=500&height=300&gride=438703.673321805&gridn=371050.276166004&srec=0&coordsys=gb&db=freegaz&addr1=&addr2=&addr3=&pc=&advanced=&local=&localinfosel=&kw=&inmap=&table=&ovtype=&zm=0&out.x=1&out.y=9&scale=100000" target="_blank"><img src="../images/chestmap1.jpg" width="150" height="150" border="0" /></a></td>
<td rowspan="4" valign="top"> </td>
<td height="19"><img src="../images/fw/spacer.gif" alt="" name="undefined_3" width="1" height="16" border="0" /></td>
<td></td>
</tr>
<tr>
<td rowspan="2"><img src="../images/fw/spacer.gif" alt="" name="undefined_3" width="1" height="150" border="0" /></td>
<td height="135"></td>
</tr>
<tr>
<td rowspan="2" valign="top" class="style3"><div align="center" class="style4">"We've got a chip shop and everything" </div></td>
<td height="15"></td>
</tr>
<tr>
<td height="19"></td>
<td></td>
</tr>
<tr>
<td height="15"></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

</div>

<div class="adcontainer">
<table width="200" border="0">

<tr>
<th width="194" height="158" align="center" valign="middle"><a href="http://1and1.co.uk/xml/init/?k_id=8731827" target="_blank"><img src="http://1and1.co.uk/oneandone_uk/img/banner/1and1_125x125_D2_UK.gif" width="125" height="125" border="0"/></a> </th>
</tr>
</table>
</div>
</div>
And the page in question is Here (http://www.surviving-chesterfield.co.uk/test/indextest.htm)

_Aerospace_Eng_

06-15-2005, 08:01 PM

Rather than use margin-left:215px; and margin-right:215px; use margin-left:auto; and margin-right:auto; and about your ad, try decreasing the width, remember paddings and margin count for overall widths as well. You could also position the ad using absolute positioning position:absolute;right:0;top:xxpx;

Crowds

06-15-2005, 09:08 PM

Thanks Aerospace_Eng. Setting the left and right margins to auto worked fine in IE but caused the content Div to stretch the full width of the screen in Firefox. However increasing the left and right margins from 215 to 220 seemed to fix the overlapping issue without any major changes to the appearance.
Cheers
Crowds