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)
Related
The objective of the HTML below is to have on the same horizontal line the red and the blue divs, even thought the blue div is truncated on the right due to a large width. This jsfiddle shows that even though the black/container style has overflow:hidden the blue div is not truncated. What's wrong with this HTML?
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
Floated elements will stack horizontally until the edge of their parent container is reached. At that point, the next floated element will fall down to the next line and the remaining elements will again stack next to each other.
In order to achieve the effect you're looking for, you're going to need a parent container for the floats that is wide enough to contain all the floats.
THEN, and only then, can you place another container around the parent that will clip the overflow.
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div style="width:800px">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
</div>
http://jsfiddle.net/THEtheChad/me4gj/7/
Floats bump down to the next line when there isn't sufficient room in the parent to contain them.
When you use float: and the parent div or object doesn't have the space to go ahead and display it all it just displays everything on the next line or into the next area.
Maybe just adding some more to your height values would fix it or subsequently toning down the size of the objects included in that area.
First of all, the inner divs are wrapping because of the width of container -- which is the basic behavior of float.
Also, "overflow:hidden" works in a different way in your code.
When contents have float: left or right and the container has overflow:hidden, then the container automatically wraps whole the contents instead of hiding contents.
For more details, please check out All About Floats
Im making a responsive site with dynamic content. I have a row of divs that will wrap at smaller screen widths. As some of the divs have more content and are taller than others, when a div wraps it doenst always go all the way to the left of the screen.
http://codepen.io/anon/pen/Ljmkb
I need a solution that works for different screen widths and for when the content makes the divs different heights, in other works I cant just set clear left on the 4th div.
Change float:left on your div elements to display:inline-block; in laymans terms this will place them on the same line if there is space, or start a new line and place the overflowed element at the start of it if not.
By then placing the elements in a vertical-align:top environment, they will maintain their top alignment.
Demo Fiddle
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.
I have 3 <div> blocks placed side by side. They are identical with the only difference being that the last <div> (on the far right) has a bit more text in it. However, all the blocks have a fixed width and height. For some reason, the last <div> is placed higher than the rest. I cannot figure this out for the life of me!
See here: http://jsfiddle.net/ZrSF4/
Any ideas?
You should apply vertical-align: top to all the divs: http://jsfiddle.net/ZrSF4/1/
You have to vertically align then, e.g. vertical-align:top;
http://jsfiddle.net/ZrSF4/2/
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.