ansaurus

Question

Answer 1

+1 A:

The first <div class='content'> is 150px tall, the same as the #float one, so it's pushed down exactly one line. If you wanted the #float to "span" both lines, give it more height, e.g.:

div#float {
    text-align: center;
    float: left;
    width: 150px;
    height: 300px;
    border: 1px solid blue;
    background: gold;
}

You can try it out here.

Nick Craver 2010-08-01 13:08:21

Answer 2

+3 A:

The second div is displayed as a block-element. Block elements have a width of 100%, so there is no room left for the first div to appear on the left size of your second div.

JoostK 2010-08-01 13:08:46

Answer 3

+9 A:

By default, divs will take up the entire width of the block. Your first one is just beginning after the floated div because that's where it can begin. Since both your content divs are block-level elements, they will take up the entire width available to them.

There are lots of ways to control this, but I'm not sure what you're after.

mk 2010-08-01 13:10:07

This is the correct answer. You can either define a width and a float to your content DIVs so that they show up in-line

Amit 2010-08-01 18:52:29

Answer 4

+2 A:

try switching the "display" css property to "inline-style"

Joel Martinez 2010-08-01 13:12:38

Answer 5

+1 A:

As becomes clear with above answers, this is not an issue specific about divs. It's about something called "The flow" within html-pages.

DIV's render default as an block element, which gives it a maximum width. When you float such an element, it loses this effect. Block elements however do not automatically clear floats. Thus, the first contentdiv takes all space available next to the float. The other contentdiv starts at the newline.

Justus Romijn 2010-08-03 11:18:11

Answer 6

A:

It's behaving exactly as it should. The first div in the markup is floated and thus taken out of the flow. It'll take up the 150x150 slot up in the top left corner and anything that comes after it in the markup will try to squeeze in the left over space to the right of the floated div which is what the first content div does. div's are block level elements so they will take up the entire width of the available space. Unlike an inline element, they will not shrink to fit the rendered text.

The first content div will stretch out till the rightmost edge of the window. If you're wondering why the first div (float div) did not behave like a block level element, it's because it was floated, which will cause it to shrink to fit it's contents (in your case you gave it an explicit width of 150px).

Once the browser has rendered the float div and the content div, it has exhausted the left over space so it goes to the next line and starts from the very beginning of that line for the second content div.

Looks like you are trying to set up a navigation bar followed by content. If you wrap your content in a div and float that div to the left, you will stay to the right of the gold div but a column drop will occur when the browser is resized too small to accommodate them. So you need a parent div with a width for both the float and content divs. I added an 800 pixels outerwrapper div to your markup.

.....

div#contentwrapper {
  float: left;
  width: 550px;
}

#outerwrapper {
  width: 800px;
}

</style>
</head>

<body>

<div id="outerwrapper">
<div id='float'>
    Float text.
</div>

<div id="contentwrapper">
<div class='content'>
    Content text.
</div>
<div class='content'>
    Content text.   
</div>
</div>

</div>
.....

You might also want to use a different name than the css reserved word "float" for your divs. For more CSS float tutorials.

websea 2010-08-04 02:06:26

ansaurus

tags:

views:

answers:

trying to understand <div> element

related questions