CODEWITHSUNDEEP
css
jenna salva
jenna salva

Reputation: 195

why does an element take up the entire space when I set the width?

I want to know why does an element take up the entire width when I set the width?

For example,

<div style="width:50px;">


<fieldset>
<legend>test A</legend>

<table>
<tr>
<td><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </td><td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </td>
</tr>

</table>

</fieldset>
</div>

<div style=" width:300px; float:left;">
<fieldset><legend>test2</legend>
<table>
<tr>
<td><asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> </td><td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </td>
</tr>
</table>
</fieldset>
</div>

When I check through chrome developer's tools, I can see that the second table cannot float right next to the first table or the first div, because the first div is taking up the entire place though I limited its width. I know if used "float:left" in the first dive, both divs will float one after the other. But I want to know why does using width is not enough to do the trick?

Can someone please explain that to me?

Upvotes: 0

Views: 139

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

By default, <div>'s are block level elements, which means that in the CSS box model, they start a new line UNLESS they are floated.

This is simply how standards-compliant browsers work.

Upvotes: 2

midudev
midudev

Reputation: 1061

Try to add "display: inline-block" along the style div.

Upvotes: 1

Related Questions