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>
Related
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
CSS Property Border-Color Not Working
(6 answers)
Closed 9 months ago.
I am having some trouble understanding why margin: 1rem is not applying to my footer element. When I modify the size, only the text content in the <p> for the article div and aside element are modified. There is no margin between the footer text and the background color on the top and bottom, only on the left and right. Could anyone tell me what's causing this? Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
body {
background-color: pink;
}
section {
background-color: lightgray;
max-width: 1000px;
box-sizing: border-box;
}
.article {
background-color: lightyellow;
width: 70%;
float: left;
margin: 0;
}
aside {
background-color: lightgreen;
float: right;
float: none;
overflow: hidden;
margin: 0;
}
footer {
clear: both;
background-color: aqua;
display: block;
border: black 10px;
box-sizing: border-box;
}
p {
margin: 1rem;
}
</style>
</head>
<body>
<section>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac
eleifend ex, vitae bibendum tortor. Sed rutrum, orci quis venenatis
congue, justo orci volutpat justo, semper vestibulum mauris est mattis
mi. Duis tincidunt enim congue elit egestas, ut ultrices purus
vulputate. Curabitur gravida tellus vel ornare convallis. Nunc
</p>
</div>
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor
aliquam massa. Pellentesque maximus tortor ac est ultricies, id
sodales ligula vehicula. Fusce dignissim risus ligula, a feugiat augue
</p>
</aside>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
malesuada dolor quis ante tempus, eget posuere massa egestas. Integer
feugiat tellus nibh. Vestibulum pellentesque quam eu hendrerit porta.
Suspendisse sagittis eros vitae urna convallis, sit amet venenati
</p>
</footer>
</section>
</body>
</html>
The margin is applied - your problem is just that you have declared a 10px border without declaring a border-style, so essentially it looks like the p-element's margin is overflowing, because there is an invisible border of 10px. Apply a border-style and you will see the margin:
body {
background-color: pink;
}
section {
background-color: lightgray;
max-width: 1000px;
box-sizing: border-box;
}
.article {
background-color: lightyellow;
width: 70%;
float: left;
margin: 0;
}
aside {
background-color: lightgreen;
float: right;
float: none;
overflow: hidden;
margin: 0;
}
footer {
background-color: aqua;
display: block;
border: black solid 10px;
box-sizing: border-box;
}
p {
margin: 1rem;
}
<section>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac eleifend ex, vitae bibendum tortor. Sed rutrum, orci quis venenatis congue, justo orci volutpat justo, semper vestibulum mauris est mattis mi. Duis tincidunt enim congue elit egestas, ut ultrices
purus vulputate. Curabitur gravida tellus vel ornare convallis. Nunc
</p>
</div>
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor aliquam massa. Pellentesque maximus tortor ac est ultricies, id sodales ligula vehicula. Fusce dignissim risus ligula, a feugiat augue
</p>
</aside>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam malesuada dolor quis ante tempus, eget posuere massa egestas. Integer feugiat tellus nibh. Vestibulum pellentesque quam eu hendrerit porta. Suspendisse sagittis eros vitae urna convallis,
sit amet venenati
</p>
</footer>
</section>
I believe that is margin collapse.
I can see the intent to set a black border on the parent element footer in the first place. But that probably isn't working, and border: black 10px solid; would do the trick. And the margin collapse would no longer occur in this case.
Please read following page to learn about the margin collapse.
What is Margin Collapse in CSS? And How to Avoid It
And, as the other answers pointed out, perhaps it is padding, not margin, that suits your purpose.
You need to give padding to footer
Changes I made
In BODY tag
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
IN FOOTER
padding: 2%;
You apply box-sizing then i think you like to use padding. I refactor your css a little bit.
body {
background-color: pink;
}
section {
background-color: lightgray;
max-width: 1000px;
box-sizing: border-box;
}
.article {
background-color: lightyellow;
width: 70%;
float: left;
margin: 0;
}
aside {
background-color: lightgreen;
float: right;
float: none;
overflow: hidden;
margin: 0;
}
footer {
background-color: aqua;
box-sizing: border-box;
padding: 10px;
}
p {
margin: 1rem;
}
<section>
<div class="article">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac
eleifend ex, vitae bibendum tortor. Sed rutrum, orci quis venenatis
congue, justo orci volutpat justo, semper vestibulum mauris est mattis
mi. Duis tincidunt enim congue elit egestas, ut ultrices purus
vulputate. Curabitur gravida tellus vel ornare convallis. Nunc
</p>
</div>
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor
aliquam massa. Pellentesque maximus tortor ac est ultricies, id
sodales ligula vehicula. Fusce dignissim risus ligula, a feugiat augue
</p>
</aside>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
malesuada dolor quis ante tempus, eget posuere massa egestas. Integer
feugiat tellus nibh. Vestibulum pellentesque quam eu hendrerit porta.
Suspendisse sagittis eros vitae urna convallis, sit amet venenati
</p>
</footer>
</section>
I would like to wrap the content of varying length text within a box. With the below code, the width of the box is adjusted for smaller length text. But the height doesn't vary and text is not wrapped inside the box.
.chatbox {
border: 1px solid black;
border-radius: 3.5em/5em;
padding: 2%;
max-width: 60%;
float: left;
height: auto;
white-space: nowrap;
}
<div class="chatbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo arcu, aliquet quis interdum sed, molestie iaculis turpis. Morbi rutrum molestie mauris id gravida. Curabitur libero tortor, tincidunt at facilisis vitae, euismod id urna. Proin sit amet
facilisis est. Vivamus id rutrum eros, in tempus mauris. Nunc nec velit tempus, varius neque sit amet, varius mi. Nullam ullamcorper lacus arcu, eu commodo magna consectetur sit amet.
</div>
Try this
.chatbox{
border:1px solid black;
border-radius:3.5em/5em;
padding:2em;
max-width:60%;
float:left;
}
You don't need height:auto and word-wrap, which create the problem. I changed the padding to be compatible with border-radius.
Change white-space:nowrap to white-space:normal , hope this will help you
.chatbox {
border: 1px solid black;
border-radius: 3.5em/5em;
padding: 2%;
max-width: 60%;
float: left;
height: auto;
white-space: normal;
}
<div class="chatbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed justo arcu, aliquet quis interdum sed, molestie iaculis turpis. Morbi rutrum molestie mauris id gravida. Curabitur libero tortor, tincidunt at facilisis vitae, euismod id urna. Proin sit amet
facilisis est. Vivamus id rutrum eros, in tempus mauris. Nunc nec velit tempus, varius neque sit amet, varius mi. Nullam ullamcorper lacus arcu, eu commodo magna consectetur sit amet.
</div>
just replace your css with below css:
.chatbox{
border:1px solid black;
border-radius:3.5em/5em;
padding:2%;
max-width:60%;
float:left;
height:auto;
word-wrap: break-word;
}
Just remove white-space: nowrap it works this way.
.chatbox{
border:1px solid black;
border-radius:3.5em/5em;
padding:2%;
max-width:60%;
height:auto;
float: left;
}
I've made an illustration of the situation:
The blue lines illustrate the grid the website is in. Let's assume a 960 grid for now, with a 300px left side (red part), a 20px gap and the remaining 640px for the right side (the black and green parts). I want to know if there's a solution for this problem that doesn't use calc() (due to older browsers) or background-image (because that's not really pretty).
Is there a pretty way to make this work, using just CSS while keeping the content centered within the grid, and the backgrounds flowing all the way to the borders of the screen?
http://codepen.io/anon/pen/avoKwQ
Done by pseudo elements and absolute positioning. Used bootstrap for faster demo. Actually, it is a specific problem and my solution may not fit your project. Especially not work when you require horizontal scrolling. But problem is solved.
&:after {
content: " ";
position: absolute;
top: 0; right: 6px;
width: 99999%;
height: 100%;
background: red;
z-index: -1;
}
Parent of this element ofcourse require position: relative. In example this is done by bootstrap.
Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This one has the added benefit of the columns always being equal height:
* { margin:0; padding:0; box-sizing: border-box; }
.grid {
display: flex;
}
.col-3 {
flex: 1 1 320px;
border-right: 20px solid #fff;
}
.col-2-3 {
flex: 1 1 640px;
}
.col-3 {
display: flex;
justify-content: flex-end;
}
.col-3>div {
padding: 20px;
flex: 0 1 300px;
}
.col-2-3>div {
display: flex;
justify-content: flex-start;
}
.col-2-3>div>div {
flex: 0 1 640px;
padding: 20px;
}
.red { background: #f00; color: #fff; }
.green { background: #0f0;}
.black { background: #000; color: #fff;}
<div class="grid">
<div class="col-3 red">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
</p>
</div>
</div><!-- col -->
<div class="col-2-3 green">
<div class="black">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
</p>
</div>
</div><!-- .black -->
<div class="green">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis rhoncus erat. Morbi id pretium tortor. Sed tristique, leo non fringilla tempor, orci ligula lobortis velit, a efficitur tortor dui eget libero. Ut aliquam tortor sed diam placerat, ut lacinia ipsum lacinia. Cras a neque vehicula arcu rutrum luctus. Aliquam placerat ac ex in tincidunt. Quisque nulla diam, cursus nec orci sit amet, aliquet tempor massa.
</p>
</div>
</div><!-- .green -->
</div><!-- .col -->
</div><!-- .grid -->
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.
This is driving me crazy. I'm trying to get the footer div to be at the bottom of the page even if the main content doesn't fill the height of the browser. The below code works except for when I shrink the browser up and then the footer div overlaps the wrapper div, then the scroll bar appears. I want it to bump up against the wrapper div like most sites including this one. What am I doing wrong?
<html>
<head>
<style>
body { color:#000; margin: 0; height: 100%; }
#wrapper {min-height: 100%; height: auto !important; height: 100%; background:#ff0000;
margin: 0 auto -4em; text-align: left; width: 100%; }
#header { width: 100%; height: 80px; }
#content { width: 100%; background:#00ff00; }
#footer { background:#0000ff; height: 4em; }
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
some menus;
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac eros diam, nec ultrices nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed id ipsum libero. Sed ultricies orci ut magna vulputate eu congue justo condimentum. Phasellus a convallis ipsum. Nam nec sapien eget massa porta tristique. Proin metus diam, imperdiet nec eleifend a, faucibus eget quam. Nunc non lacus sit amet lorem vehicula viverra ut vitae sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id tellus id ligula dictum consequat non ut ligula. Morbi interdum felis sed turpis sagittis vulputate.
</div>
</div>
<div id="footer">
© 2009 Somebody
</div>
</body>
</html>
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Check out this live example of how it works:
http://www.toonklaas24.ee/