How to set fluid layout in css/html
Question
I have this exercise which i am trying to move the main contents (content 1 and content 2) In the middle between two side menus. Currently, main contents flow above two menus. Can someone tell me how to set it right? Thank you.
style.css
body {
color: #000305;
background-image: url('images.jpg');
font-size: 87.5%;
font-family:Arial;
line-height: 1.5;
text-align:left;
}
a{
text-decoration:none;
}
a:link, a:visited {
color:#CEFC3F;
}
a:hover, a:active{
background-color:#CEFC3F;
}
.body{
margin: 0 auto;
width: 90%;
clear:both;
}
.mainHeader img{
width: 100%;
height:100px;
margin:2% 0;
}
.mainHeader nav {
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainHeader nav ul {
list-style:none;
margin: 0 auto;
}
.mainHeader nav ul li{
float:left;
display:inline;
}
.mainHeader nav a:link, .mainHeader nav a:visited {
color: #fff;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
.mainHeader nav a:hover, .mainHeader nav a:active,
.mainHeader nav .active a:link, .mainHeader nav .active a:visited{
background-color: #CEFC3F;
text-shadow:none;
}
.mainHeader nav ul li a{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainContent{
line-height:25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.content{
width:50%;
}
.subContent1{
background-color:#FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:3% 5%;
margin-top:2%;
}
.subContent2{
background-color:#FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:3% 5%;
margin-top:2%;
}
.leftNav{
width:16%;
float: left;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 2% 3%;
}
.rightNav{
width:16%;
float:right;
background-color:#FFF;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding:2% 3%;
}
.footer{
width: 100%;
float:left;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 2% 0 2% 0;
background-color: #666;
}
index.html
<!DOCTYPE html>
<html lang="en">
<html>
<head class="top_header">
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<div class="mainHeader">
<img src="Lighthouse.jpg"/>
<nav><ul>
<li class="active"><a href="#">My Account</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Cart</a></li>
</ul></nav>
<div class="search_tab">
<div class="search_textbox">
</div>
<div class="search_button">
</div>
</div>
</div>
<div class="mmainContent">
<div class="content">
<div class="subContent1">
<h2>Content 1</h2>
<p>Here is a sub-content Here is a sub-content Here is a sub-content Here is a sub-content
Here is a sub-content Here is a sub-content Here is a sub-content Here is a sub-content
Here is a sub-content Here is a sub-content
</p>
</div>
<div class="subContent2">
<h2>Content 2</h2>
<p> this is a paragraph this is a paragraph this is a paragraph this is a paragraph
this is a paragraph this is a paragraph this is a paragraph this is a paragraph
this is a paragraph this is a paragraph this is a paragraph this is a paragraph
</p>
</div>
</div>
</div>
<div class="leftNav">
<h2><a>Left Menu</a></h2>
<p>This is a left menu This is a left menu This is a left menu This is a left menu This is a left menu
This is a left menu This is a left menu This is a left menu This is a left menu
This is a left menu This is a left menu This is a left menu </p>
</div>
<div class="rightNav">
<h2><a>Right Menu</a></h2>
<p>This is a right menu This is a right menu This is a right menu This is a right menu This is a right menu
This is a right menu This is a right menu This is a right menu This is a right menu
This is a right menu This is a right menu This is a right menu This is a right menu
</p>
</div>
<footer class="footer">
<p>All Right Reserved!</p>
</footer>
</body>
</html>
4 answers
solution1
1 2013-08-02 10:05:08
I would change the order of your html so that the left column comes before the content.
I would also then put a float:left; on the content.
You can see a working example here:
solution2
1 2013-08-02 10:32:56
In div class content gives margin-left: 25% . And in div tag Class leftnav gives margin-top: -30% . For the rightnav gives the margin-top:-30%;
solution3
0 2013-08-02 10:02:50
您还需要浮动mainContent区域。
solution4
0 2013-08-02 10:10:21
The problem is that .mainContent only contains the .content div, and you're trying to add two floated menus after it. In this jsfiddle I've moved the columns into the .mainContent and floated the .content area: http://jsfiddle.net/LmJ5e/
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.