After a lot of research about floats i am confused why there is so much information on the web that a float should always have a width defined. It is often said, that the float will take the whole space and therefore behave like a normal block element. but with regard to the information here http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float the float will always shrink-to-fit. as i understand the float will never take the whole space unless it needs to.
when thinking about navigation items, is there a need to specify a width? i don't think in this case. maybe when content inside the float is too large?
it was also discussed here Do you really need a width on floated element? but there is no clear statement, that this is not necessary.
I don't think all floated elements require fixed widths, but perhaps any positional CSS that includes dividing your page into 3 columns, you may want to consider fixing the widths on the columns floated to left/right. One reason for this is because navigation bars or forum posts or some sort of list of hyper links is often aligned on the sides of the pages, and if these 2 columns are not fixed, the character limit of your anchor links will be limited as the screen size decreases. You may not want your inline anchor tags wrapping across multiple lines when the screen shrinks. Fixed Widths would eliminate this.
Floats dont need a width. The advantage and disadvantage as well is a collapsing container, if there is no content in it.
Have a look at: Expand div to max width when float:left is set
Deleting all p-tags in the div-tag (class right) shows the effect: no more red background
.content .left{
float:left;
width:100px;
background-color:green;
}
.content .right{
margin-left:100px;
background-color:red;
}
<div class="content">
<div class="left">
<p>Hi # all</p>
</div>
<div class="right">
<!-- no content no backgroundcolor -->
</div>
</div>
Related
I see when two columns layout is used (main content and sidebar) main content DIV is Float:left and Sidebar is Float:right.
I see one benefits of it. When box-sizing: content-box; (default) is used then more than required space is left for fitting together and then both float opposite so that it in any trouble, both fits on screen! I see sometimes, when wrapper is more than the combined witdh (which is left so that they fit together) of Sidebar and content then space between sidebar and content is more than desired. This depends on Browser as well.
But with "box-sizing: border-box;" I see both fit exactly as expected even without leaving any extra space between both Div.
Which is better and why?
<div id="content">
With CSS: Float:left;
</div>
<div id="sidebar">
With CSS: Float:right;
</div>
Or,
<div id="content">
With CSS: Float:left;
</div>
<div id="sidebar">
With CSS: Float:left;
</div>
Think of responsive design as well.
Neither is better than the other. They behave differently but can under some conditions produce the same results.
Scenarios when floating one container to the right is great:
If the sidebar is on the left side of the content you'd need to place it before the content in your markup if both float to the left. This isn't ideal for SEO purposes. If you float in both directions it doesn't matter where they appear in the markup.
If you need the right element to align to the far right side you should float it to the right. You can't do it if boat float to the left, because different browser engines render sub pixels in different ways. Some layouts may look horrible even if it's just a few pixels off.
As a continuation to the last point, you don't really want two elements with width: 50%. A slightly lower percentage than 50, like 49.9%, is to be preferred because of, again, sub pixel rounding. To avoid a scewed layout you'll probably want to float the right element to the right.
Scenarios when floating both elements to the same side may be better:
When both elements should be aligned next to each other.
Can't really think of anything else.
I usually float the right element to the right, but they're very often interchangeable.
In tables, if you have a row, that row is the same height and all cells in the row grow and shrink with dynamic content. (If one cell has a ton of text and the other cells not much they are all the same height, letting you make columns and rows).
With the popularity of div float layouts using tables is often frowned upon. However how do I duplicate this and other functionality and benefits of a table while still keeping the display set to block for the benefits of a block, cross browser?
I've seen many hacks but they always seem to be too complicated, interfere with each other, or take tweaking. I am looking for a standard reliable method for the following:
Make div boxes the same height across a row with a wrapping container
<style>
.cell { float:left; }
</style>
<div class="row">
<div class="cell">Content 1 with more width</div>
<div class="cell">Content 2<br>with<br>more<br>height<br>Content 2<br>Content 2<br></div>
<div class="cell">Content 3</div>
</div>
In this case all div's of class "cell" will have the same height, and not be fixed height at all and be floated and will stay that way for dynamic content of any size.
Vertically center content
In this case using the example above, all content would be vertically aligned to the middle, for dynamic content of any size.
Make div's of class "cell" share a common width that is based on the wrapper "row"
In a table when you specify width as 100% or fixed width the cells will automatically try to all be the same width, unless an image or block like item prohibits this. How can this be achieved with floating divs? As if you say, float all "cell" to the left, you can specify a min width or a fixed width, but I know of no way to make them share a common width that is dynamic, like a table. In floated divs by themselves they shrink to the size of the content.
How to avoid content pushing against the container/wrapper "row" and treat it as if it were just a block
For whatever reason when a floating div is inside a wrapper you can get odd behavior where content will "stick" to the wrapper as if were floating too. Even sometimes when using a <br style="clear:both"> at the end I had this happen.
If you could answer all these questions about floating divs for me it is most appreciated. Please don't tell me to break this into separate questions as they are all related to the same thing. Please don't tell me this would be better asked somewhere else. If however you wish to be helpful great :)
If the solution is using display:table-cell alone, I've tried this, it makes the divs not behave as a block, shrinking it, the background shrinks to the content too, and in other ways it does not behave as a block. Also some versions of IE do not support this and I am looking for a cross browser solution. Thank you.
If you want your div elements to behave like table cells, you can style them that way:
.row {
display: table;
width: 100%;
}
.cell {
display: table-cell;
width: 33.33%;
vertical-align: middle;
text-align: center;
}
This does not rely on setting a height or min-height on the .cell elements, so the height will remain flexible.
--- jsFiddle DEMO ---
You may apply the CSS like this;
.row{
height: 200px;
}
.cell{
display:block;
float:left;
height:100%;
}
Here is a working Live Demo.
and Here is a workaround to distribute the columns also.
Hope this helps
Note: DO NOT add percentage attribute to child divs to fill parent div (for example 50% each for 2 child divs, 25% for 4 child divs etc) since these vary according to number of divs and cannot be calculated accurately sometimes
Well, I went the jQuery route...
http://jsfiddle.net/dtgEt/1/
I would like to point out that while yes, some people will just use a table, a table is for displaying tabular data, not layout. A div has no semantic meaning and therefor is a better choice, in my opinion (unless it is actually tabular data that your are publishing to the web).
My solution works in IE 7 and probably would in IE 6. If you want to align your content in the center of the container there are many good ways to do that others have suggested (beat me to it).
If you need the formatting of a table, but you have to support older browsers that don't have support for display:table, then use a table. It's pretty much that simple.
Sometimes a table is the appropriate option, and sometimes it's the only option that will work without adding some moderately-risky JS or jQuery to simulate the formatting of a table.
For instance, a table (or display:table, which amounts to the same thing) is the only natural way to have true vertical centering of dynamic content. It's also the only natural way to enforce equal-height columns for dynamic content. And in general, a table is appropriate anytime you need to display a data grid of some sort.
I have a web page with the following content..
<div id="container">
<div id="header"></div>
<div id="lsidebar">
</div>
<div id="content">
</div>
<div id="rsidebar">
</div>
</div>
i need a container to be centered always on the screen.
the container width would be the half of the screen.i use margin-left for centering the container.But it is different for different browser.
Another problem:i am adding float:left for lbar,content,rbar.but the rbar is moving to next line like this...
Here is my css
#container
{
position:absolute;
width:75%;
left:15%;
}
#header{width:100%;height:430px;}
#content{position:relative;top:0px;width:60%;}
#rsidebar{border:2px solid black;width:100px;height:200px;float:left;}
#footer{position:relative;top:10px;width:100%;}
how to solve this issue...
the container width would be the half of the screen.i use margin-left for centering the container.
Sorry?
If the container is half of the screen, you'll have a width:50%. If you want to center it, you'll have margin:0 auto;.
There are only two appropriate techniques to center items on a page: text-align:center; for content, margin:0 auto; for blocks. You may be tempted to do something like margin-left:25%;width:50%;, but it will probably not give the expected results in all browsers and cause too many problems, so try to stick with the techniques that everybody uses for years, unless you can prove that your technique is much better.
Another problem:i am adding float:left for lbar,content,rbar.but the rbar is moving to next line
Probably the outer width of three panels is bigger than the width of the container. Note that we're talking about the outer width, not the width itself. For example if the container element is 1067 pixels width and contains two panels of 200 pixels and one panel of 600 pixels, with 50 pixels margin between, the actual width of three panels will be 200×2 + 600 = 1000, but the outer width will be 1000 + 50×2 = 1100, i.e. greater than 1067 pixels.
To avoid problems with the widths of the panels, especially in the case where your container has a variable width depending on the size of the window, you can float-left the left panel, float-right the right one and keep the central panel to fill the remaining space. This may not always be possible depending on your layout and design. If this is a case, it would be great to see the actual source code in your question to be able to give a more specific answer.
Seing your source code, I don't understand why are you using position:absolute and position:relative for nearly every element. What's the point?
1. Aligning the container
To align the container, you have to specify not only the width, but also the margins.
div#container{margin:0 auto;width:50%;}
2. Float-lefting the panels
Now that you have your container filling the half of the space and centered, let's position the panels.
Your right panel has a width of 100 pixels. I suppose that your left panel has the same width.
div#lbar,
div#rbar{width:100px;}
Let's float-left and float-right them:
div#lbar,
div#rbar{width:100px;float:left;} /* Apply this style to both side panels */
div#rbar{float:right;} /* Override the float:left of the preceding line */
Now, we want the central panel to avoid filling the space already filled by two other panels:
div#content{margin:0 100px;}
That's pretty all you need to do.
I may also suggest you to read some books about HTML/CSS. Looking at your code, I might suppose that you're not very familiar with it, and that some reading may improve both your understanding of both languages and your skills.
first: give the container a width and
margin-left auto; margin-right:auto;
do you use a meyerweb reset stylesheet?
The combined width of you lbar + content + rbar + margins+ padding is probably more than the space in your container; therefore your rbar moves to the bottom.
ALso use the container solution of Daniel
You can use margin: auto to center container horizontally. About sidebars you probably want lbar, rbar, content in markup and float: left, float: right for lbar and rbar respectively. Remember to put clear: both on footer just in case.
You can also use HTML5 or something like http://lessframework.com to specify conditions for different screen sizes.
Here is my site, first of all.
You'll notice that underneath the divider bar in the middle of the page, there are three columns, one with a form, one with text, one with links.
Now, resize the window to slightly smaller, and the right div will drop down to the next line.
Is there anyway to just not display that? So, the divs will adjust (I have a liquid layout) up to the point where they won't fit, then, instead of wrapping the div down to the next line, it just won't be displayed?
You can also achieve that with CSS only.
Just assign the following CSS attributes to #row4:
#row4 {
min-width:1202px; /* the exact value depends on the sum of the width of your 3 column boxes */
overflow:hidden;
}
This differs slightly from your intended solution, since the right box will stay partly visible when sizing down the window and will not immediately disappear completely.
Please be aware that min-width won't work in IE6. However, there are several ways to emulate the min-width property, if you need to support old IEs:
http://www.thecssninja.com/xhtml/ie6-min-width-solutions
You can give them a wrapper div with a min-width set and force it to use a horizontal scrollbar if it gets too small. The nice thing about a wrapper div is you can give it a max-width as well and keep things from getting wonky on super huge monitors.
I'm not a fan of horizontal scrollbars, but it beats completely removing content.
Ok here is what you should do
Wrap all three floated division on a parent div, something like this
<div id="parent">
<div class="form">......</div>
<div class="text">......</div>
<div class="links">.....</div>
</div>
Now to solve your problem give a fixed height to the parent div like
#parent { height:400px;clear:both; }
You would have to use Javascript to get the width of the viewport, then change the display property of the div that is wrapping to display:none so that it doesn't show up when the browser width is too small.
I have a bunch of float: left elements and some are SLIGHTLY bigger than others. I want the newline to break and have the images float all the way to the left instead of getting stuck on a bigger element.
Here is the page I'm talking about : link
If they are all the same size if works beautifully : link
Thanks! (I'd rather not get into javascript or server side scripting if I don't have to)
Well, if you really need to use float declarations, you have two options:
Use clear: left on the leftmost items - the con is that you'll have a fixed number of columns
Make the items equal in height - either by script or by hard-coding the height in the CSS
Both of these are limiting, because they work around how floats work. However, you may consider using display: inline-block instead of float, which will achieve the similar layout. You can then adjust their alignment using vertical-align.
I fixed it by removing float:left, and adding display:inline-block instead. Haven't used it for images, but should work fine, there, too.
Use display:inline-block
You may also find vertical-align: top or vertical-align:middle useful.
This is what I did. Seems to work in forcing a new line, but I'm not an html/css guru by any measure.
<p> </p>
You can wrap them in a div and give the div a set width (the width of the widest image + margin maybe?) and then float the divs. Then, set the images to the center of their containing divs. Your margins between images won't be consistent for the differently sized images but it'll lay out much more nicely on the page.
This is an old post and the links are no longer valid but because it came up early in a search I was doing I thought I should comment to help others understand the problem better.
By using float you are asking the browser to arrange your controls automatically. It responds by wrapping when the controls don't fit the width for their specified float arrangement. float:left, float:right or clear:left,clear:right,clear:both.
So if you want to force a bunch of float:left items to float uniformly into one left column then you need to make the browser decide to wrap/unwrap them at the same width. Because you don't want to do any scripting you can wrap all of the controls you want to float together in a single div. You would want to add a new wrapping div with a class like:
.LeftImages{
float:left;
}
html
<div class="LeftImages">
<img...>
<img...>
</div>
This div will automatically adjust to the width of the largest image and all the images will be floated left with the div all the time (no wrapping).
If you still want them to wrap you can give the div a width like width:30% and each of the images the float:left; style. Rather than adjust to the largest image it will vary in size and allow the contained images to wrap.
Add to .icons div {width:160px; height:130px;} will work out very nicely
Hope it will help