View Full Version : Container and DIV issues.

03-08-2005, 10:21 AM
I have a container (600px) which is holding two floating DIV's, which sit fine within the container, my problem is that i want them both to move down with the content.

As it stands the DIV's move down seperatly depending on the content placed within them, i want this so the bottom border is all together and that it all moves as one.

My website can be found Here (http://pally.freeunixhost.com/index2.php) and the problem is there to be seen, i'll post code later when i'm home from college if anyone needs it to help me sort the problem. :confused:

03-08-2005, 10:45 AM
how is the text generated? is it dynamic or manual?

03-08-2005, 12:11 PM
manual, i'm also in the process of finding a new host, which is pretty annoying! :mad:

03-08-2005, 01:24 PM
below is the problem as an image and the coding i have on the site from the navigation downwards.

---------- CSS ------------

#container {
margin: 0px;
padding: 0px;
width: 602px;
margin-left: auto;
margin-right: auto;

#con_left {
margin: 0px;
padding: 0px;
width: 421px;
float: left;
background-image: url("images/newscontent.gif");
background-repeat: no-repeat;
background-position: top left;
border-right: 1px dashed #D993D5;
border-bottom: 1px solid black;
border-left: 1px solid black;


#con_right {
margin: 0px;
padding: 0px;
width: 178px;
float: right;
background-color: #A4A2A4;
border-right: 1px solid black;
border-bottom: 1px solid black;


---------- CSS END ------------

---------- BODY ---------------

<div id="logo"></div>
<div id="nav">
<p class="nav">Home Portfolio About CSS Links</p>
<div id="container">
<div id="con_left">
<p class="con_left">content content content content content
content content content content content content content
<div id="con_right">
<p class="con_right">content content content content content
content content content content content content</p>

---------- BODY END ------------


03-08-2005, 01:46 PM
The only pure HMTL/CSS way to achieve to elements sitting next to eachother and sharing the same height would be to use table markup.
Any other solution would require javascript or setting the heights to a fixed width; relying on percentage heights requires the containing block to be of set height or be absolutely positioned; see Height property (http://www.w3.org/TR/2004/CR-CSS21-20040225/visudet.html#the-height-property) for further details.

You can also fake equal hight visually using a background image treatment.

03-08-2005, 01:51 PM
so if i created a whitebackground image, and set it to repeat x & y would this allow me to get it to work or not ?

03-08-2005, 02:40 PM
The idea is to fit both "columns" inside a container element; the height of this container is dependent on the largest height of either column -provided that there's something in place to clear any floated stuff.

This container can be assigned a background image to fake the two-column visual effect; I don't know if you want the dark grey to run all the way down, but the white, the gray and any kind of separator or border can be included in a single horizontal bar type image. Repeat-y would be the choice; since you use a fixed width layout, the width of the image can be chosen to fit this.

More on this topic can be found in the ALA article Faux Columns (http://www.alistapart.com/articles/fauxcolumns/).

03-08-2005, 02:46 PM
oh yeah, i get what you mean, thanks alot i think i shall do that :thumbsup: