Problems with html positioning - aside, footer, padding
Question
I'm so lost on this one. With countless hours of searching and trying, I haven't gotten a working solution.
I'm having problems with achieving all of the following three points at the same time:
- Get some padding at the bottom. (When content gets longer, then eventually there is no empty space at the bottom.)
- Get both left-and-right side to expand together with the longest content
- when aside is shorter than main content, then the separator line should still be from top to bottom.
Some notes:
Currently, third point is working.
When changing aside's position to relative, then the page extends as it should. although third point then doesn't work anymore.
Haven't found any solution for the first one yet.
Here is a scaled down version of my layout. Since all problems still exist in this little amount of code, then this is probably enough:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<header>
<nav>
<!--My nav here-->
</nav>
</header>
<div id="content_wrapper">
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
</p>
</aside>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
</p>
</div>
</div>
</div>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
}
body {
background-color: #ebebeb;
}
#wrapper {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#content_wrapper {
position: absolute;
width: 1000px;
top: 90px;
background-color: #fff;
}
#content_wrapper aside {
position: relative;
float: left;
width: 200px;
padding: 10px;
top: 0px;
bottom: 0px;
box-shadow: inset -8px 0 10px -6px #ddd;
}
#content {
float: right;
width: 760px;
padding: 10px;
}
I'm quite sure that this needs to be built again from scratch.
But before I can successfully do that I would like to understand the cause of my problems and is this maybe easily solvable?
Or in other words what is the best/working way to achieve this layout, so that everything would expand correctly and so that there can still be padding at the bottom?
Any help is very much appreciated.
2 answers
solution1
8 ACCPTED 2013-02-26 17:35:05
This was actually really similar to my problem, although I didn't realize it:
Separating the column content from it's background colour
The first step to solving the equal height problem is to break it into smaller pieces that can be solved separately. The way we do this is to use two divs for each column instead of one. The first div will be used to hold the content and the other will be used as the background colour. This separation gives us individual control over these elements plus we can put them together in a more useful way. This will all become clear shortly.
A floated container div will always be the height of it's floated contents
This is the central principle behind this equal column height method. The only way to make the height of a div equal to the tallest column is if that div contains all the columns. So to explain this another way, by placing the columns inside a container we cause the container to be the height of the tallest column. This is a very useful structure.
Three column HTML div structure
In the example above the three content columns are inside a container div.
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
Three column CSS
And here is the CSS that forces the container div to the height of the longest column.
#container1 {
float:left;
width:100%;
}
#col1 {
float:left;
width:30%;
background:red;
}
#col2 {
float:left;
width:40%;
background:yellow;
}
#col3 {
float:left;
width:30%;
background:green;
}
For this structure to work correctly in all browsers the container div must be floated (left or right) plus each of the column content divs must also be floated, it does not matter which way. The process of floating the content divs makes them line up horizontally across the page. Floating the container makes it stretch down to the height of the tallest column inside. If we don't float the container then the content divs will stick out of the container at the bottom and the container won't have the correct height. Actually in this example the container will end up with a height of zero if it is not floated.
Adding extra nested containers
The next step to equal height columns is to add extra containers so they are nested inside each other. We need the same number of containers as we do columns - three. These three containers are going to be the backgrounds of each column. Notice that we have removed the background colours from the original columns and added them to the containers.
Three column HTML div structure
The two extra containers have been added to the HTML below.
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
Three column CSS
All the elements are floated to the left and the containers have a width set to 100% so they stay the full width of the page. The background colours have been removed from the content divs and added to the containers.
#container3 {
float:left;
width:100%;
background:green;
}
#container2 {
float:left;
width:100%;
background:yellow;
}
#container1 {
float:left;
width:100%;
background:red;
}
Moving the containers into place with relative positioning
Using relative positioning we now move the containers to their new locations. When each container is moved the divs become visible below. It is the layering and position of the coloured containers that create the background of the equal height columns. The container2 div is moved to the left by 30% to reveal the green right-hand column and the container1 div is moved to the left 40% to reveal the yellow center column and at the same time the red section that is still visible becomes the left-hand column.
The CSS relative positioning rules
Here is the added CSS lines showing the the addition of relative positioning.
#container2 {
position:relative;
right:30%;
}
#container1 {
position:relative;
right:40%;
}
Moving the content back into each column
The next thing to do is to move the content of each column back onto the page so that it aligns with the column background colour underneath. Again this is done with simple relative positioning.
And then finally we chop off the overhanging containers by adding an overflow:hidden; rule on the outermost container - container3.
This is the initial layout where I will integrate my code in now: JFiddle example
One thing which isn't solved in this JFiddle example is the separator. Currently I thought adding the separator as drop shadow to the content instead of aside. Which would be easier to create than another div.
solution2
0 2013-02-26 17:01:04
You could try doing it like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #ebebeb;
}
#wrapper {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#content_wrapper {
width: 1000px;
margin: 90px auto 90px;
background-color: #fff;
}
#content_wrapper aside {
display: table-cell;
width: 200px;
padding: 10px;
box-shadow: inset -8px 0 10px -6px #ddd;
}
#content {
display: table-cell;
width: 760px;
padding: 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<!--My nav here-->
</nav>
</header>
<div id="content_wrapper">
<aside>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
</p>
</aside>
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque posuere sodales ante id facilisis. Vestibulum euismod mattis nisl, id consequat tortor suscipit vitae. Maecenas sit amet dolor nibh. Quisque vitae commodo augue. Nullam bibendum posuere est, non gravida ante lacinia quis. Vestibulum imperdiet orci eu nisl posuere a gravida orci ullamcorper. Nullam quis lacus ipsum.
</p>
</div><!-- #content -->
</div>
</div>
</div>
</body>
</html>
Absolute positioning in #content_wrapper was removed and margins were added to make sure there's always some space at the bottom. Besides that aside and #content are being displayed like table cells - this might not work in some older browsers (namely IE older versions), so it might not be suitable for you, depending on what browsers you want to support.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.