Lousy at CSS - need help with divs

Hello, everyone,

I’ve been a developer since 2000 and usually have someone else to do layouts. How do I get a div that is display:inline; and not using 100% of the available width to force the next div to go below it?

Pseudo-code:


<div id="headerOutput" style="float:left; clear:right; display:inline; width:900px;">
{several other divs inside}
</div>
<div id="outputData">
{several other divs inside}
</div>

Right now, the outputData div is being placed immediately to the right of headerOutput. How do I force it to display below headerOutput?

V/r,

:slight_smile:

Add clear: left to the styles for outputData

You can remove clear: right from headerOutput (unless you need it for other reasons).

Why are you floating the element if you don’t want anything next to it?

Just remove the float and remove the display:inline (note that display:inline on a floated element does nothing other than to fix a margin hack in ie6 and can be ignored these days).

If I remove display:inline, then it will become a block element and use all the available width. Or is that incorrect?

I was trying to take a legacy web app and bring it into the modern day with table-less design. I’m giving up. No time to screw with it, so I’m going to go ahead and use tables like the original developer did. :frowning:

Thank you for your help. I’ll get it, one of these days.

V/r,

:slight_smile:

Floating an element removes it from the normal flow of the page. The box that is floated shrink-wraps around its content. Assigning float to a box overrides block, inline-block, and inline.

Paul’s point is that floating that block doesn’t seem to be necessary. So, if it’s not necessary, why not and what would be a more logical method of construction?

Don’t give up. Give it a go. It’ll be worth the trouble. :slight_smile:

!! Did not know that! I will remember that, from now on.

If this were a personal project, I would absolutely give it another go. Sadly, I am expected to have certain things done before a certain time, so I will have to give up on that, at least for now. Maybe later, time allowing, I can try, again.

Again, thanks to everyone for encouragement and advice. It is appreciated.

V/r,

:slight_smile:

That is true except that you have given the element a width so it will be the width that you set :slight_smile: