div container sizing issues
Earlier I asked a question about horizontal positioning of div containers, now I've got follow up and related questions:
(1) As you can see in the HTML code below, I've got a "column_bottom" container (for links) placed to the left of a "content_bottom" container (for the page's main content). As I type more content into the "content_bottom" container so that its height exceeds that of the left "column_bottom" container, the entire "content_bottom" container shifts to BELOW the "column_bottom" container. What can I do so that the left "column_bottom" container's height dynamically开发者_C百科 match the height of the right "content_bottom" container (and they stay horizontally next to each other)?
(2) As you can see in the CSS style sheet below, I tried to manually set the widths of the "column_top" and "column_bottom" to match in em units by trial and error. Would there be any issues with this method across different browsers on different systems? What can I do to ensure that "column_top" and "column_bottom" widths always match?
Thanks for your help.
Here's the HTML:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>this is the site's title</title>
<link rel="stylesheet" href="penonek.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="column_top">site<br>
</div>
<div class="content_top"> title<br>
</div>
<div class="column_bottom">
<ul>
<li>home</li>
<li><a href="#">link 1<br>
</a></li>
<li><a href="#">link 2<br>
</a></li>
<li><a href="#">link 3<br>
</a></li>
</ul>
</div>
<div class="content_bottom">main content here<br>
</div>
</div>
</body>
</html>
Here is the CSS:
body {
margin: 0;
padding: 0;
font-family: Arial,Helvetica,sans-serif;
text-align: center;
color: #cccccc;
background-color: black;
font-size: 1em;
}
.wrapper {
margin: auto;
min-width: 60em;
max-width: 60em;
font-family: Arial,Helvetica,sans-serif;
width: 60em;
color: #cccccc;
}
.column_top {
border-width: 0 0 0.25em;
border-bottom: 0.25em solid black;
width: 3.2em;
min-width: 3.2em;
float: left;
padding-top: 2em;
text-align: right;
color: #333333;
max-height: 1em;
background-color: #f4f4f4;
font-size: 3em;
min-height: 1em;
max-width: 3.2em;
height: 1em;
font-weight: bold;
padding-bottom: 0.2em;
}
.content_top {
border-width: 0 0 0.25em;
border-bottom: 0.25em solid #f4f4f4;
padding-top: 2em;
font-size: 3em;
min-height: 1em;
text-align: left;
max-height: 1em;
height: 1em;
font-weight: bold;
padding-bottom: 0.2em;
}
.column_bottom {
width: 9.28em;
text-align: right;
padding-top: 3em;
color: #333333;
border-bottom-width: 0;
background-color: #f4f4f4;
border-right-width: 0;
padding-right: 0.3em;
float: left;
border-left-width: 0;
min-width: 9.28em;
max-width: 9.28em;
}
.content_bottom {
padding: 3em 5em 5em;
border-collapse: separate;
text-align: left;
float: left;
}
.column_bottom ul {
margin: 0;
padding: 0;
text-decoration: none;
color: #333333;
list-style-type: none;
font-weight: inherit;
}
.column_bottom a:hover {
background-color: #999999;
}
.column_bottom a {
text-decoration: none;
font-weight: inherit;
color: #333333;
}
Add a wrapper for .content_bottom with this css:
.content_bottom_wrapper {
width: 100%;
margin-left: -9.58em;
float: right;
}
And add this to content-bottom:
margin-left: 9.58em;
9.58em = width of .column_bottom + padding-right on .column_bottom
http://jsfiddle.net/p93fM/
Here:
Live Demo
I added this to .content_bottom in CSS
width:640px;
You can adjust the margins as you wish.
加载中,请稍侯......
精彩评论