i don't understand, why my floating doesn't work. There is the site - and as you can see, the floating doesn't want to work. What is the problem with it?
It works. It's floating right in the context of it's parent which is <div id="content">.
You need to put it (in HTML code) before the <div class="side_bar"> which is floating left, like this:
<div id="content">
<div class="news_block">
the floating to the right side - don't want to work
</div>
<div class="side_bar">
sidebar
</div>
</div>
OR, if for example your scripts need that, you want to wrap everything you want on the left side to the side_bar DIV, which is the only one which has the CSS to float on the left. Maybe you haven't noticed it, but you have:
<div id="content">
<div class="side_bar"> <!-- floats left -->
sidebar
</div>
<div> facebook thing </div> <!-- doesn't float -->
<div> ads </div> <!-- doesn't float -->
<div> whatever </div> <!-- doesn't float -->
<div class="news_block"> <!-- floats right-->
the floating to the right side - don't want to work
</div>
</div>
You can't expect the two DIVs which have float defined to float correctly, when you have non-floating element in between them.
Related
I have a series of elements within a row-fluid and span12 that are span4. I want to be able to output as many of these as necessary and have them automatically line up in columns of 3. The problem im having is that this happens, but there is an offset (the uncleared float offset).
Is there a way to do this without counting each box and every 3rd one closing the previous row and starting a new one?
<div id="content" class="clearfix row-fluid">
<div id="main" class="span12 clearfix" role="main">
<div class="row-fluid">
<div class="span4">Test</div>
<div class="span4">Test</div>
<div class="span4">Test</div>
<div class="span4">Test</div>
<div class="span4">TEst</div>
</div>
</div>
</div>
This is practically unavoidable if your boxes have varied height. You can get around this issue by using the Masonry jQuery plugin.
Otherwise, you can use a fixed height for your boxes.
This happens because floated elements fall out of the normal HTML document flow and default to this behaviour when some elements are taller than their siblings.
The code below is from W3CSchool example:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:20%;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:80%;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
You can copy the code and paste it to the editor below:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs
I have already specified the width of "menu" to 20% and "content" to 80%, why at the right side of "content" has a blank area?
It will only align properly if I add "float:left" in the css style of "content". I can't understand why it behave like that. Anyone can explain?
Thanks for help.
This is because the width of the container for menu and content is set to 500px.
Set it to 100% if you want it to take the whole page:
<div id="container" style="width:100%">
Also if you want the content to simply take all the remaining space, don't assign it a width:
<div id="content" style="background-color:#EEEEEE; height:200px">Content goes here</div>
Here's the full working code:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:100%">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:20%;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
There is blank area at right of page because your floating div is overlapping your content div because floating divs always float above the other divs (Try removing background-color of menu to see example). When you apply float right/left to your content div, it also floats with menu div hence occupies all the space.
please refer to This site
for more information on float.
Thank you,
DIVs are block elements. This means that 2 DIVs are displayed one bellow another, if not use float , position:absolute;, or inline.
if you use 'float' style express this div present external for 'inline' and present inside for 'block',and will affect the back of the element. so if content right display you can use 'float:left;width:80%' and 'float:left;width:80%'. In fact, this is 'display:inline-block', but according to my experience, it will produce the browser bug.
I don't understand why the fiddle at http://jsfiddle.net/zHH4D/
doesn't show the "to the right" outside the red area and to the right,
but inside the red block?!
I can put the div outside the parent div and this kind of works but it just doesn't make sense to me.
Where am i thinking wrong?
You have a typo:
<div style="width:340px;float:left;background-color:#f00;">
<div>above ok</<div> <!-- TYPO -->
<div>under ok</div>
</div>
This causes the browser to interpret your markup as best as it can, which results in this (copied from Chrome inspector):
<div style="width:340px;float:left;background-color:#f00;">
<div>above ok<!--<div-->
<div>under ok</div>
</div>
<div style="float:left;">
to the right?
</div>
</div>
Here's a fixed version:
<div style="width:340px;float:left;background-color:#f00;">
<div>above ok</div> <!-- Notice the closing div tag -->
<div>under ok</div>
</div>
How can I get the content div to get at the bottom instead of that odd position?
http://jsfiddle.net/madprops/6FFXL/1/
<div>
<div style='float:left'>name </div>
<div style='float:left'>date </div>
<div style='float:left'>comments </div>
</div>
<div id="contenido" style="font-size:20px;">content</div>
EDIT: removed float:top
It is at the bottom for me in your example, (FF5), but you should probably make it safe by setting content to clear your floated divs, like this:
<div id="contenido" style="font-size:20px;clear:both;">content</div>
Also, the float:top on your first div is invalid, there is no top property of float.
I'm trying to create a web page and I have this problem-question. The idea is to show an article in the main column, to the left, and several comments below the article.
In the right column, we'll show ads.
The problem is this: I have proved several layouts (this is the last one), but always the right column fall below the left (article-and-comments).
How I could do this?. The idea is that the left column (article-and-comments), could grow indefinitely, or even could be very short (if no one has commented), but the right column always keep on the right.
<body>
<div class="container">
<div class="header">Header menus etc etc</div>
<div id="main-block">
<div id="article-and-comments">
<div class="article-detail">The Article </div>
<div class="comment">1° Comment</div>
<div class="comment">1° Comment</div>
<div class="comment">1° Comment</div>
</div>
<div class="advertising">
Right Column with Ads
</div>
<div class="push"></div> <!-- This is to push the footer to the bottom
</div> <!-- main-block -->
<div class="footer">
Footer
</div>
you need to make the article-and-comments and advertising widths to add up to the main-block width.
And you need to float them left and right ..
example at http://www.jsfiddle.net/gaby/tBd7L/
There are a few ways to do this. One is to set your content column to a fixed width and float it left, then set your ad column to have a left margin greater than or equal to the width of the content column.
Here's a very rough example:
http://jsfiddle.net/PVqKX/