margins and positioned divs

[AdRock952]

I have a div container which is postioned relative, which i use for messages.

Inside the container, i have 2 divs of different widths are they are both positioned absolute so they sit side by side.

The problem is becuase I don't know how long the message is going to be, i haven't set a height on any div and it is squashing all the content on top of each other, and not have a div with it's content under each of the other divs

I was able to get this to work by floating the inner divs left but then i couldn't get my 30px margin between each of the out divs

div.message {
	margin: 0px 0px 30px 0px;
	border: 1px solid #ccc;
	position: relative;
}
 
div.tdLeft {
	width: 130px;
	left: 0;
	top:0;
	position:absolute;
	padding: 10px;
}
 
div.tdRight {
	width: 690px;
	left: 130px;
	top:0;
	position: absolute;
	padding: 10px;
}

and the html for each div

<div class='message'>";
     <div class='tdLeft'><p>Posts: </p></div>
     <div class='tdRight'><p></p></div>;
</div>

[Centauri]

div.message {
    margin: 0px 0px 30px 0px;
    border: 1px solid #ccc;
    position: relative;
    overflow: hidden;
}
 
div.tdLeft {
    width: 130px;
    float: left;
    padding: 10px;
}
 
div.tdRight {
    width: 690px;
    float: right;
    padding: 10px;
}

The overflow setting will force the .message div to actually surround the floated contents.

[kaloua3]

Well, taking the extra punctuation marks out of your code (" and and adding some text to see what is going on, it actually looks good in IE7. You have to add the padding to the widths, though, to get the absolute divs to position correctly (tdRight's left property should be 150px). The 1px border around div.message becomes basically a straight line since positioning the two inner div's absolute takes them out of the document flow. In IE7 the two divs grow down to show all of their content with no problems. What does the rest of you code look like? What browser are you using? Did you validate your code?

[kaloua3]

@Centauri:

Why does going from overflow: visible (default) to hidden make the floats appear inside the containing message div with the 1px border all around instead of the border colapsing to nothing (appears as a 2px high horizontal line) above the floats? Are the floats inside the div or not? I would have thought that, reading the description of the overflow property, that the only difference would be that the floats might exceed the div border rather than being clipped. Does the lack of a specific height have anything to do with it? Where is this described in the spec?

[RyanReese]

It's simple containing floats. Normally if it is not set to visible then the floats will hang out of the container because floats are taken out of the flow of the natural document. The div has collapsed to 0 height because of the collapsing. Basically adding overflow:hidden; (or any other overflow) will basically give glasses to the div. It will contain the floats and allow for ajacent elements to clear

[Centauri]

Floats are removed from the normal document flow, and the parent element will normally collapse in height, with the floats hanging out the bottom. Not sure exactly where in the specs (Paul has quoted it before) this behaviour is noted, but a setting of anything other than the default will cause an element with undefined height to surround floated content, presumably to determine whether any action needs to be taken in respect of the overflow. This is a common method of float clearing, and further mention is made of this in the Sitepoint Reference and in Paul's CSS FAQ sticky thread at the top of this forum. IE6 doesn not understand this, though, but triggering HasLayout on the element (via a set dimension) will cause the same behaviour.

[RyanReese]

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

http://www.w3.org/TR/CSS21/visuren.html#floats

[kaloua3]

Thanks to both of you for the expanation, and to Ryan for the spec reference.

[RyanReese]

Your not welcome... If you have any more questions just shove it.

[AdRock952]

That does the job....looks much better now

Another quick question which should be simple enough

On top of those divs, I would like to position a link with a background image which will take the user to another page. I only want it once.

I have got the link to display a background image and it's the right size but it's on the left and i want it on the right.

The div that it's in hasn't got any style but it's 100% width. I tried postioning the div relative and postioning the link absolute but it goes inside of the first message div

<div><a id='topreply' href=''>Reply</a></div>
<div class='message'>";
     <div class='tdLeft'><p>Posts: </p></div>
     <div class='tdRight'><p></p></div>;
</div>

a#topreply {
	display: block;
	color: #FFF !important;
	height: 25px;
	width: 142px;
	background: url(images/treply.gif) no-repeat; 
	font:bold 11pt Arial,Verdana,sans-serif;
}

[Centauri]

If you want the text on the right hand side, add text-align: right; to the div styles.

[RyanReese]

There is no need to use AP'ing here. text-align will allow you to position elements on the right hand side. Either place the text-align on the children of the div or on the actual div itself.