StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I will provide you with a simple example here, let's assume that you are not assigning the middle <code>div</code> any <code>width</code> so see what it will be actually doing</p> <p><a href="http://jsfiddle.net/mSXX6/3/" rel="nofollow"><strong>Demo</strong></a></p> <pre><code><div style="width:100%"> <div style="width:20px;height:20px;background-color:red;float:left;border: 3px solid #000;"></div> <div style="height:20px;background-color:red;margin:0 auto auto;border: 3px solid #000;"></div> <div style="width:20px;height:20px;background-color:red;float:right;border: 3px solid #000;"></div> </div> </code></pre> <p>Why this happens?</p> <p><code>div</code> is a <code>block-level</code> element, it takes up the entire horizontal space on the page, if you know, when you <code>float</code> any element either <code>left</code> or <code>right</code> it won't take <code>100%</code> anymore and it will take only the space assigned by using width, or the content it holds, so in this case, <code>left floated</code> <code>div</code> will take <code>20px</code> width leaving other space unused. Now you have another <code>div</code> which IS NOT FLOATED but it will take the rest of the available horizontal space, making your <code>right floated</code> <code>div</code> element to push down.</p> <p>So what to do in order to solve this?</p> <p>You need to <code>float</code> all the <code>div</code> to the left, or it may be enough if you make the <code>middle</code> <code>div</code> <code>float</code> to the left or to the right. Now I am aware that you want to have 2 <code>div</code>, 1 floated to left and other to right, but this is not the right way to do that, if you want, you can wrap the elements inside a container <code>div</code>, or what you can use is <code>position: absolute;</code> to set the elements right.</p> <hr> <p>In order to show you how block level elements work, I will share you another example here..</p> <p>Assume that you are having a <code>div</code> nested inside a <code>p</code> tag (This is invalid so please never use this in real world, this is just for demonstration purpose), and give some width to the <code>div</code> element and see how it renders your text.</p> <pre><code><p>Hello World, I don't want the <div>text to</div> break</p> div { width: 40px; background: #f00; } </code></pre> <p><a href="http://jsfiddle.net/mSXX6/4/" rel="nofollow"><strong>Demo 2</strong></a></p> <p>Though you provide the <code>width</code> to block level element, it will still break the paragraph.</p> <hr> <p>From <a href="http://www.w3.org/TR/html401/struct/global.html#h-7.5.3" rel="nofollow">w3c</a></p> <blockquote> <p>By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not.</p> </blockquote>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload