I can't see what I'm doing wrong here. I'm working with the widths and margins of a three column layout and I want to widen the right sidebar into the white space to the left.
But when I increase the width of #sidebar-right above 22%, both sidebars drop down below the content. I'm missing something having to do with the combined widths and margins.
HTML and CSS are below the image. This is also a responsive structure, if that makes a difference. I need to stay with this CSS and HTML as it is a WordPress theme, and I don't want to move into another type of CSS column or box structure.
Update 10/23/12 I gave up on trying to adapt the current CSS and HTML and changed to box layout model CSS for page templates because the box model works well and I am able to simplify my page templates, too.
Any ideas?
HTML:
<body class="three-column">
<div id="page">
<div id="main">
<div id="primary">
<div id="content" role="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
</div>
<div id="sidebar-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
<div id="sidebar-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
</div>
</div> (some closing divs omitted for clarity).
CSS:
#page {
margin: 1em auto;
max-width: 1075px;
}
#main #secondary {
float: none;
margin: 0 7.6%;
width: auto;
}
.three-column #page {
max-width: 1075px;
}
.three-column #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
.three-column #content {
margin: 0 34% 0 20%;
width: 44%;
border:1px solid #c2c2c2;
padding:10px;
}
.three-column #sidebar-right {
float: right;
margin-right: 1.5%;
width: 22%;
border:1px solid #c2c2c2;
padding:10px;
}
.three-column #sidebar-left{
position:relative;
float: left;
width: 15%;
margin-left: -72%;
border:1px solid #c2c2c2;
padding:10px;
}
Your issue is the -26.4% right margin on #primary and the -72% left margin on #sidebar-left.
I've made a Fiddle with those adjusted; I dropped the side-bar left left margin (but kept 1.5% for padding's sake), and adjusted #primary's right margin to -100%.
http://jsfiddle.net/mstauffer/CtkyN/1/
This is still pretty darn hack-y. If there's any way you can, you'll have a much better experience re-working the HTML and CSS.. but if not, that fiddle will at least allow you to re-size the right sidebar as you want within this existing framework.
Update: I don't have credible sources, but I can explain the CSS math. In general, you're using negative margins on #primary to lay the other two divs in areas #primary would normally occupy. Normally, the only way to make divs overlap like this would be by setting them to position: fixed or position: absolute. Because those are so hard, a layout like this would normally be accomplished with three left floats (or in the future, flexbox), but because of the order of your HTML that's not possible.
Instead, you're forced to convince the CSS renderer that #primary doesn't mind being over-laid... which you do by setting a negative margin of -100%, essentially saying, "Here, have all this space, it's fine for you to overlap it." Once you've opened up the space, you then use the left and right floats (and the width constriction) to place the sidebars in the blank spaces on either side of #content.
I hope that helps!
I think the problem is specifically here:
.three-column #content {
margin: 0 34% 0 20%;
}
margin: top right bottom left;
so you have to decrease the right margin to let the right sidebar expand.
din't try it. you better test it.
use this code:-
HTML
<body class="three-column">
<div id="page">
<div id="main">
<div id="primary">
<div id="sidebar-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
<div id="content" role="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
</div>
<div id="sidebar-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
</div>
</div> (some closing divs omitted for clarity).
CSS
#page {
margin: 1em auto;
max-width: 1075px;
}
#main #secondary {
float: none;
margin: 0 7.6%;
width: auto;
}
.three-column #page {
max-width: 1075px;
}
.three-column #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
.three-column #sidebar-left{
position:relative;
float: left;
width: 15%;
}
.three-column #content {
margin: 0 34% 0 20%;
width: 44%;
border:1px solid #c2c2c2;
padding:10px;
float: left;
}
.three-column #sidebar-right {
float: left;
margin-right: 1.5%;
width: 22%;
border:1px solid #c2c2c2;
padding:10px;
}
Its very easy actually your very near you forgot that padding is adding to the width of your content so if you have 3 divs with 20% width and 10% margin & 10% padding on each side you would get beyond the 100% you have to move with.
Working JSfiddle here
Others have already given you the explanation. I just wanted to add the visual representation to make it easier to see the problem.
.three-column #content div is the middle content it need to have margin left as #sidebar-left div width + padding and margin right as #sidebar-right div width + padding and no need to fix the width for the middle content.
Check the sample and code.
Edit: I did not see the comment that you had to stay with the same CSS. Possibly this can be used in addition to what you currently have, but if not please disregard.
If you use a row-fluid along with div spans you can scale them without having as many issues. The CSS is in fiddler.
http://jsfiddle.net/GeyHC/1/
<div class="row-fluid">
<div class="span2" id="content" role="main" style="border:1px solid #c2c2c2;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
<div class="span6" id="sidebar-right" style="border:1px solid #c2c2c2;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
<div class="span2 offset1" id="sidebar-left" style="border:1px solid #c2c2c2;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
</div>
EDIT:
I did a three column layout that might work for you.
HTML
<body class="three-column">
<div id="page">
<div id="main">
<div id="primary">
<div id="container">
<div id="sidebar-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
<div id="sidebar-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
</div>
</div>
</div>
</div>
</body>
CSS
#container {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 80%;
}
#sidebar-left {
float: left;
width: 30%;
min-height: 300px;
background-color: #cccccc;
}
#sidebar-right {
float: left;
width: 25%;
min-height: 300px;
background-color: #cccccc;
}
#content {
float: left;
width: 30%;
min-height: 300px;
background-color: #999999;
}
I also noticed that having a border cause problems for the layout. May be adding following will help to keep the border inside the div.
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
See this article.
Hope this helps.
Related
JSfiddle
I have a situation where I would like to float a small image to the left of text within a div. I don't want the text to wrap under the image, and some research led me to add the overflow:hidden; property on <p>. While this makes the paragraph next to the image behave as I want, the following paragraphs are then not aligned with the first. Is there a nice way to get all paragraphs aligned? I tried display: table-row;, but this affects other elements on the page (and I have read up on why this is the case).
I need to work within the constraints present in the JSFiddle (i.e., can't really modify html), and cross-browser support is a priority.
.header {
color: white;
background-color: red;
padding: 15px;
}
.header p {
overflow: hidden;
}
.img {
background-color: green;
width: 45px;
height: 45px;
float: left;
}
<div class="header">
<div class="img">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut
pretium augue vitae neque finibus, quis ornare dolor fermentum.
</p>
<p>
Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
</p>
</div>
Use a margin-left on the paragraphs that is the width of the image + the margin/space you want between the image and paragraph. Then you have no need for the overflow.
.header {
color: white;
background-color: red;
padding: 15px;
}
.header p {
margin: 0 0 1em 55px;
}
.img {
background-color: green;
width: 45px;
height: 45px;
float: left;
}
<div class="header">
<div class="img">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut
pretium augue vitae neque finibus, quis ornare dolor fermentum.
</p>
<p>
Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
</p>
</div>
So, you should set a div for the whole thing, one for the image and one for the text.
I don't know if that's what you're looking for, but here you go.
.container {
width: 400px;
height: auto;
}
.imageDiv {
max-width: 200px;
height: auto;
float: left;
}
.image {
max-width: 100%;
}
.text {
max-width: 200px;
min-width: 200px;
text-align: center;
float: left;
}
<div class="container">
<div class="text">
<p>
Some text.
</p>
</div>
<div class="imageDiv">
<img class="image" src="http://nexceris.com/wp-content/uploads/2014/04/bokeh-cover-bg.jpg">
</div>
</div>
Code the one div for other content and manage that two inside div like you want.
<div class="header">
<div class="img">
</div>
<div class="other">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet turpis vel diam elementum imperdiet eu id ex. Nam dictum blandit ullamcorper. Nam ultrices risus neque, eget finibus dolor suscipit a. Fusce lobortis dictum odio sit amet tempus. Ut pretium augue vitae neque finibus, quis ornare dolor fermentum.
</p>
<p>
Maecenas suscipit risus tellus, posuere commodo diam egestas ut. Suspendisse ex enim, ullamcorper et faucibus nec, viverra vel leo. Aliquam venenatis mi metus, et tincidunt nulla laoreet quis. Donec sodales nunc ut finibus cursus.
</p>
</div>
</div>
If I have two div elements. Both have similar parent location and float:right the style attribute. Which one will be more right than the other? I'd like to be able to tell that div1 should be most right, and div2 follows the div1. Or other way around, but this order must be deterministic.
thanks.
UPD: I'd like not to rely on the order of the divs in the html page. My html page gots generated from java/jsp, so i cannot be absolutely sure which div will be generated and written first. Is there another solution?
According to the CSS specification, the first floated element that appears in the code will be placed to the right, followed by the second one.
If there is not enough room on the line, then the second floated element will appear below the first one.
Reference: http://www.w3.org/TR/CSS21/visuren.html#floats
Also, be aware of block-formatting contexts:
http://www.w3.org/TR/CSS21/visuren.html#block-formatting
p {
overflow: auto; /* this creates a block formatting context */
}
img {
float: right;
}
<p>
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>
<p>
<img src="http://placehold.it/700x100">
<img src="http://placehold.it/100x200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.</p>
.right {
background: green;
}
.right-too {
background: red;
}
div {
float: right;
height: 20px;
width: 100px;
}
<div class="right">RIGHT</div>
<div class="right-too">RIGHT TOO</div>
The one to appear first in the code will be further on the right.
Edit: added a snippet
First one is more right..
<div style='width: 600px; height: 200px; border: 1px solid black;'>
<div style='width: 200px; height: 100px; background-color: yellow; float: right;'>A</div>
<div style='width: 200px; height: 100px; background-color: green; float: right;'>B</div>
</div>
Here is the jsfiddle: http://jsfiddle.net/q6wnm4dv/
The first one you write in the HTML will be the first one from the right side.
HTML:
<div class="wrapper">
<div class="div1"></div>
<div class="div2"></div>
</div>
CSS:
.wrapper {
width: 100%;
height: 50px;
}
.div1 {
float: right;
background-color: red;
height: 50px;
width: 50px;
}
.div2 {
float: right;
background-color: blue;
height: 50px;
width: 50px;
}
Here you can see the working example: https://jsfiddle.net/mgjdjf62/
the best way to order items is to use flexbox: a guide to flexbox
We have a signup form aligned on the RHS of the content column. The content wraps nicely around the form which is desired.
The problem is the content div appears to overlap the form div preventing users from interacting with the form (Chrome and FF). Oddly it appears to work in IE.
For the form we are currently using:
float: right;
http://www.connecttherapy.com/our-services/
This looks great, the content wraps nicely, but we can't interact with the form.
Attempted solutions
Reduce the width of the content div but then it wouldn't wrap under the form as desired.
We have also tested
position: relative;
top: 3px;
left: 485px;
z-index: 1;
http://www.connecttherapy.com/test/signup-form/
With this solution we can interact with the form but it pushes the content down below the height of the form.
Have also played with
clear:right
clear:left
properties, but this didn't seem to help.
I'm sure the peeps on these boards will have a very simple, elegant solution which is currently eluding us. Thanks in advance!
#inner-signup-box-test {
position: relative;
z-index: 1;
}
try this, hope it helps.
I have re-created the problem in this runnable snippet (note that the input cannot be interacted with):
.content {
position: relative;
}
.form {
float: right;
height: 100px;
width: 200px;
background: #CCC;
margin: 0 0 0 20px;
}
<div class="form">
<input type="text" />
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mauris leo, vitae venenatis dolor euismod a. Quisque at tortor luctus, consequat elit non, ornare augue. Nulla consequat lectus a ante fermentum auctor. Ut augue libero, aliquam sit amet ex sed, auctor fermentum quam. Praesent dignissim cursus eros non iaculis. Integer aliquet sodales ipsum, vel ornare justo ullamcorper non. Maecenas aliquet orci quis diam tempus varius. Cras eu eros semper, malesuada libero in, ullamcorper lectus. Aenean ornare suscipit magna eu varius. Quisque lacinia sed est eget viverra. Morbi blandit justo non augue mollis sagittis.
</div>
Option One
Move the sign-up form inside div#goldp_post_81 and remove the forms top margin. This will correct the z-levels. This order makes more sense as the content of div#goldp_post_81 is wrapping around the forms parent div.
HTML
<div class="goldp_content" id="goldp_post_81" style="position:relative;">
<div id="inner-signup-box-test"></div>
</div>
CSS
#inner-signup-box-test {
background: transparent url(images/signup-bg-compact.jpg) no-repeat scroll 0px 2px;
float: right;
height: 225px;
width: 160px;
margin: 0 0px 15px 15px; /* <-- no more top margin */
}
Here is my re-creation fixed by moving the div inside (input now reacts to pointer events):
.content {
position: relative;
}
.form {
float: right;
height: 100px;
width: 200px;
background: #CCC;
margin: 0 0 0 20px;
}
<div class="content">
<div class="form">
<input type="text" />
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mauris leo, vitae venenatis dolor euismod a. Quisque at tortor luctus, consequat elit non, ornare augue. Nulla consequat lectus a ante fermentum auctor. Ut augue libero, aliquam sit amet ex sed, auctor fermentum quam. Praesent dignissim cursus eros non iaculis. Integer aliquet sodales ipsum, vel ornare justo ullamcorper non. Maecenas aliquet orci quis diam tempus varius. Cras eu eros semper, malesuada libero in, ullamcorper lectus. Aenean ornare suscipit magna eu varius. Quisque lacinia sed est eget viverra. Morbi blandit justo non augue mollis sagittis.
</div>
Option Two
If you can't move the HTML around, then the solution of Ghos does work, make sure it is floated to the right and there are no left, top, bottom or right properties.
#inner-signup-box-test {
position: relative;
z-index: 1;
float: right;
}
Option two example:
.content {
position: relative;
}
.form {
position: relative;
z-index: 1;
float: right;
height: 100px;
width: 200px;
background: #CCC;
margin: 0 0 0 20px;
}
<div class="form">
<input type="text" />
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mauris leo, vitae venenatis dolor euismod a. Quisque at tortor luctus, consequat elit non, ornare augue. Nulla consequat lectus a ante fermentum auctor. Ut augue libero, aliquam sit amet ex sed, auctor fermentum quam. Praesent dignissim cursus eros non iaculis. Integer aliquet sodales ipsum, vel ornare justo ullamcorper non. Maecenas aliquet orci quis diam tempus varius. Cras eu eros semper, malesuada libero in, ullamcorper lectus. Aenean ornare suscipit magna eu varius. Quisque lacinia sed est eget viverra. Morbi blandit justo non augue mollis sagittis.
</div>
Here's an example demonstrating this problem:
http://jsfiddle.net/93twL/
Here's the code (same as the jsfiddle):
<body>
<header>
<h1>
Heading
</h1>
</header>
<div id="container">
<div id="left">
<h3>
Left
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="main">
<h3>
Main
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="right">
<h3>
Right
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor,
</p>
</div>
<footer id="footer">
<h3>
Footer
</h3>
</footer>
</div>
</body>
</html>
html{
min-height:100%;
height:100%;
}
body{
height:100%;
width:100%;
margin:0;
box-shadow: inset 0 0 1px 1px black;
}
h1{
margin-top:0;
}
#container{
clear:both;
width:100%;
height:100%;
float:left;
box-shadow: inset 0 0 1px 1px black;
}
#header{
min-height:12%;
clear:both;
float:left;
width:100%;
box-shadow: inherit;
}
#footer{
min-height:10%;
box-shadow: inherit;
clear:both;
float:left;
width:100%;
}
#left{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
#main{
float:left;
box-shadow: inherit;
width:48%;
min-height:50%;
padding:0.5%;
}
#right{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
As seen in the example by looking at the borders, once the content goes above 100% heigtht, the content overflows. I'd rather have the element expand.
To fix this, one would remove specifying the height. However, if there is no height specified then how am I supposed to control the height of all the content?(using percentages) I need buttons, headers, footers and so on that need a height set to it. (Without HTML and BODY having a 100% height, no other elements will be able to set a height using percentages)
In case it is not clear, I am talking about a fluid layout where the height is given in percentages.
So is this even possible or should I just give this up?
I think what you're after is a fluid width 100% and 100% height, so that the content vertically and horizontally expands. That is a tough thing and can't be done with css alone, flexbox might be able to do it, though I don't know. I saw it recently done with CSS and jQuery using a fixed height on both the header and footer, but the rest is fluid height and width:
http://codepen.io/anon/pen/EsJHu
I made it more responsive here: http://jsbin.com/momep/7/edit
CSS
/* Reset */
* {
margin: 0;
padding: 0;
}
/* Sticky footer */
html, body {
height: 100%;
width: 100%;
}
#page {
height: 100%;
height: auto !important;
min-height: 100%;
}
#sticky-footer-wrap {
overflow: auto;
padding-bottom: 100px;
}
.site-main {
overflow: hidden;
height: 100%;
}
.site-footer {
position: relative;
height: 100px;
margin-top: -100px;
clear: both;
}
/* Header */
.site-header {
height: 100px;
}
#media (min-width:992px) {
/* 3 columns */
#primary {
float: left;
width: 50%;
margin-left: 25%;
}
#secondary {
float: left;
width: 25%;
margin-left:-75%;
}
#tertiary{
float: left;
width: 25%;
}
}
/* Colours */
.site-header {
background: #C5E0DC;
}
#primary {
background-color: #F1D4AF;
}
#secondary {
background-color: #ECE5CE;
}
#tertiary{
background-color: #E08E79;
}
.site-footer {
background: #774F38;
}
HTML
<div id="page">
<div id="sticky-footer-wrap">
<header class="site-header">
<h3>Header</h3>
</header>
<div class="site-main">
<div id="primary">
<h2>Primary content</h2>
<h1>Layout Features</h1>
<ul>
<li>Header (fixed height)</li>
<li>3 fluid columns</li>
<li>100% or full height columns (jQuery)</li>
<li>Sticky footer (fixed height)</li>
<li>Correct source order of columns</li>
<li>IE8 compatible (Modernizr)</li>
</ul>
</div>
<div id="secondary">
<h3>Secondary content</h3>
</div>
<div id="tertiary">
<h4>Tertiary content</h4>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<h3>Footer (sticky)</h3>
</footer>
jQuery
// On page load
$(window).load(columnHeight);
// On window resize
$(window).resize( function () {
// Clear all forced column heights before recalculating them after window resize
$("#primary").css("height", "");
$("#secondary").css("height", "");
$("#tertiary").css("height", "");
columnHeight();
});
// Make columns 100% in height
function columnHeight() {
// Column heights should equal the document height minus the header height and footer height
var newHeight = $(document).height() - $(".site-header").height() - $(".site-footer").height() + "px";
$("#primary").css("height", newHeight);
$("#secondary").css("height", newHeight);
$("#tertiary").css("height", newHeight);
}
You can replace height with min-height: 100%. And at the end of your HTML add a div with css rule clear: both to clean up all the floating elements.
So it will look like this :
<body>
<header>
<h1>
Heading
</h1>
</header>
<div id="container">
<div id="left">
<h3>
Left
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="main">
<h3>
Main
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor, sit amet bibendum tortor congue pulvinar. Donec convallis mauris non nunc consectetur, eget auctor nisi volutpat. Vestibulum lobortis nunc non ullamcorper faucibus. Nulla convallis justo in turpis aliquet vehicula. Donec eget turpis tempor, ornare magna nec, rhoncus orci. Sed pharetra risus orci, eu facilisis diam interdum id.
</p>
</div>
<div id="right">
<h3>
Right
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis tortor ligula. Aenean sagittis ut nibh quis hendrerit. Proin tincidunt scelerisque feugiat. Duis nunc erat, accumsan sed diam in, vulputate rutrum velit. Etiam tincidunt pretium dolor,
</p>
</div>
<footer id="footer">
<h3>
Footer
</h3>
</footer>
</div>
<div style='clear:both'></div>
</body>
</html>
I'm not entirely sure what you're attempting to do here, but how about this?
http://jsfiddle.net/9X8j2/
Only the CSS changed:
body{
width:100%;
margin:0;
box-shadow: inset 0 0 1px 1px blue;
}
h1{
margin-top:0;
}
#container{
width:100%;
box-shadow: inset 0 0 1px 1px gray;
}
#header{
min-height:12%;
clear:both;
float:left;
width:100%;
box-shadow: inherit;
}
#footer{
min-height:10%;
box-shadow: inherit;
clear:both;
width:100%;
}
#left{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
#main{
float:left;
box-shadow: inherit;
width:48%;
min-height:50%;
padding:0.5%;
}
#right{
float:left;
box-shadow: inherit;
width:24.5%;
padding:0.5%;
min-height:50%;
}
I changed the color of the box shadows to tell them apart a little easier.
Removing most of the height attributes may be what you're looking for.. including removing the CSS on the HTML tag. At least now the container does not overflow the body.
Please let me know if this is at all helpful.
Im wanting the container (purple border) to grow in size alongside the main content so i can place a border around it so it looks like the sidebar (blue border) is full height.
<div id="container">
<section id="mainContent">
<h1>title here</h1>
<img src="images/jayzmchg.jpg"></img>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis.
Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur
a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et,
cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac
ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis
venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet
ligula scelerisque hendrerit.</p>
</section>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<footer id="footer">
<p></p>
</footer>
Above is the html, the following is the css
#container { /* purple border */
height: 250px;
margin: 0 auto;
max-width: 1000px;
border: 1px solid #FF00FF;
}
#mainContent { /*red border */
float: left;
width: 700px;
border: 1px solid #FF0000
}
#sidebar {/*blue border */
width: 294px;
float: right;
border: 1px solid #0000FF;
}
ive set the height at 250px for the container so you can see it, ive tried setting it as 100% but just doesnt show anything im guessing this is cause theres no content in it but how could i make it so it acts like if what is inside the mainContent is its height.
adding overflow:hidden to container causes this
Put a float:left; on #container.
OR
Put overflow:hidden; on #container to clear the internal floats.
Example fiddle: http://jsfiddle.net/3jNTv/
Chris Coyier has written a great post about it here:
http://css-tricks.com/all-about-floats/
Try set the height to heigh: 100%;?
Try this one, see live example:
link
height: auto !important;
I have added a class floClear and add a div. it will work fine.
CSS
#container { /* purple border */
margin: 0 auto;
max-width: 1000px;
border: 1px solid #FF00FF;
}
#mainContent { /*red border */
float: left;
width: 700px;
border: 1px solid #FF0000
}
#sidebar {/*blue border */
width: 294px;
float: right;
border: 1px solid #0000FF;
}
.floClear
{
clear:both;
}
HTML
<div id="container">
<section id="mainContent">
<h1>title here</h1>
<img src="images/jayzmchg.jpg"></img>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec eget sapien ut eros auctor consectetur. Praesent pretium ante et orci pharetra venenatis.
Proin fringilla fermentum sollicitudin. In ornare lectus ipsum, et egestas arcu consectetur
a. Nulla facilisi. Praesent id convallis arcu. Vestibulum leo tellus, hendrerit eu metus et,
cursus ultricies sapien. Aenean eu rutrum sem. Curabitur at quam nec augue viverra tempor ac
ut lorem. Sed vel accumsan sapien. Phasellus luctus diam ac luctus tincidunt. Integer quis
venenatis mauris. Nam malesuada augue id nibh porta commodo. Nam ullamcorper dui sit amet
ligula scelerisque hendrerit.</p>
</section>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="floClear"></div>
</div>
<footer id="footer">
<p>Test</p>
</footer>