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.
Related
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>
I'd like to horizontally align (for whatever screen resolution) the 2 main blocks.
One has a float:left.
If I set margin-left:auto to .site (main content block, at the right), it gets horizontally aligned. The problem is that I don't know how to have the sidebar (the block at the left) aligned too. It's difficult because I need to be sure that the menu gets perfectly "attached" to the content block (so I can't use position:relative;left:XXpx because it changes on different resolutions).
Any ideas? :)
EDIT: If possible, solutions that work with IE 7-8 too (unfortunately) :D
I might be missing something here, but you just want to get 2 block elements and make them center-aligned horizontally?
Just wrap them in another div and align that wrapper div with margin: 0 auto.
Check this link.
<div id="#wrapper">
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
</div>
EDIT:
Of course that you have to float the Content div as well (and not only the Sidebar)
To get an idea of what the hell I'm on about, please go Here and Here
As you will see there is a side bar and a content area, sidebar is floating left, content floating right, and footer clears both.
Height on the sidebar and content are not set so the divs grow!
However, you can see that if one floating div is bigger than the other, the the background image appears.
I need to know how to make the background colour of both divs always be the same, and grow together in peace and harmony
Thanks
display: table-cell on both divs (and removing the floats) can work easily here, though lower IEs won't like it.
Or, you could always use the infamous Faux Columns
What you are asking is for the two divs to be the same height even though their content height is different. This cannot be done without relying on tables or javascript.
What you can do to achieve the same effect, is have a container div (I can see you already have it) and give this a vertically repeating background image of the sidebar and content color. This is known as Faux Columns.
Make sure to clear within the container (move <div class="clear"></div> up one level) so the container gets the height of whichever div is bigger.
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.
I'm coding my first liquid layout and I have to say it's a lot more time-intensive than a fixed width layout. However, I see the advantages and so I'd like to make it work!
Here's my situation:
I have a header with some text in that makes the header of variable height depending on the browser text size.
I have a fixed-width nav on the left. The nav is floated left and has a negative margin the same number of pixels as the width which effectively makes it slot into a zero-width space. Neat!
I have my main content section which is floated right. It has a left margin the width of the nav so the content avoids hiding underneath the links of the nav.
The nav comes second in the source so the users of assistive tech get to the content first.
This works great but only if the content of the main content section has lines of text that wrap around the full width of the page. If the content in only short lines or a list the content section's width is the same as the content within it. As the content section is floated right it means the content looks wrong in these situations. Obviously the page width is variable and so for larger monitors this problem is more common.
I'm looking for a way of showing the content section filling the page at all times so that the content will sit on the left and fill out to the right even when the lines are short. I've tried absolute positioning but that messes up the footer which stays in the right place by clearing the floated nav and content section.
Any suggestions would be really useful!
Edit:
As requested I've provided some demo pages.
Here is a page which has wide content and looks OK: http://www.qkschool.org.uk/static/redesign/widepage.html
And here is a page with thin content which is all right-aligned because of the float: http://www.qkschool.org.uk/static/redesign/thinpage.html
Many thanks!
This has always been a favorite source of mine for liquid layouts:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
(Make sure to click around for all the different variations)
I'm not saying you should abandon learning yourself, but I think it's worth a look at some of the tricks used in those layouts. All of them work great in IE6 and IE7 as well, and use good content-first source order. They can be easily turned into fixed-width if needed. I honestly have never found another layout that I like as much as the ones posted on this website.
One variation I use with these layouts is wrapping every column with an extra inner div, and setting the margin or padding on this div and nothing else, this will make the width and positioning calculations a lot simpler (you'll see if you check it out). I also wrap the entire thing in a div for easier max-width and centering.
Good luck and let me know if you need any advice with this technique, I've been using it for years and it has served me well.
Here is summary of my own layout technique which is in use on many sites, it can take any number of columns, but this sample just copes with your left one :
JSFiddle example
the sample shows the footer will always remain below longest column
the sidebar can be any width just change the margin of the content to suit, you can even float two sidebars to the left - then just increase the margin on the #content to clear them.
Alternatively (or as well) the sidebar (or 2) can be floated right, then you just margin the #content div on right instead of the left to "clear" them
This is source ordered, content before sidebars.. it can incorporate any number of headers subheadings and footers (or under content) without affecting the main "columns" area, and you can float your sidebars (if more than one), in any order too.. thus changing their order, width, number even after the fact, via CSS alone
I think my layout technique may have even been incorporated into some Drupal themes and is in use, it's certainly been used on some larger sites too, but I lost track.. it's never let me down anyway :)
here's the template code..
CSS:
html, body {padding: 0; margin: 0;}
#footer,#header {background: #444; color: #fff; clear: both;}
#container { /* always the same don't add anything here */
overflow: hidden;
width: 100%;
}
#contentwrap {/* always the same do not add anything else here */
float: left;
width: 100%;
margin-right: -100%;
}
#content {
margin-left: 270px; /* same as width plus padding of the sidebar(s) and in the same direction(s) */
padding: 20px;
border-left: 1px solid #444;
}
#sidebar {
float: left;
width: 230px;
padding: 20px;
background: #dad;
border-right: 1px solid #444;
}
HTML:
<div id="header">header</div>
<div id="container">
<div id="contentwrap">
<div id="content">
<h1>Content remaining width</h1>
<p>add more content here</p>
<h2>Header Level 2</h2>
</div><!-- content -->
</div><!-- contentwrap -->
<div id="sidebar">
<p>short sidebar</p>
<p>add more content here until this gets longer than main and the footer will still stay below</p>
</div>
</div>
<div id="footer">footer</div>
This really is very flexible as sidebars can be fixed width or fluid too, and it will work with ems , %, px.. you name it
yes I'm attached to this code ;)
Edited to add
If older IE's (6 did) do give trouble with floats/hovers inside the content area, the #content div may need haslayout set, if so just add zoom: 1; to it in fact in my layouts I still do out of habit!
If you think in terms of physics, even liquids have boundaries. When it expands too much it becomes gas. When it contracts too much it becomes solid. In web design, boundaries are important as well. I suggest researching into Elastic design (translates loosely to design that is flexible within specific parameters).
Here are some links to get you started:
A List Apart: Elastic Design
CSS Layouts: The Fixed. The Fluid. The Elastic
Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You?
It´s hard to tell without seeing the design, but 100% heights and widths can be faked styling the parent element (for example using a background on the body or a wrapper div).
If your last point is not crucial (I guess it is because you mentioned it...) you can also switch the order of your floats and remove the float from the content.
You could try using the Fluid 960 grid system - get it working, and then remove/rename classes to make it a bit more semantic.