css - left sidebar not on left side
Question
The left sidebar won't position itself on the left side of the main area. It seems to get stuck on the navigation link. It should be placed "below" the navigation links and the "buttons" should overlap the sidebar just as they overlap the header. Then I want the text to wrap around the sidebar (works in the code I posted here).
I have tried using z-index on the navigation and sidebar. I have also tried using position:relative; and float:left; on the sidebar without result. The text should also wrap around the sidebar as it is in the example below. I managed to move the sidebar to the left using position:relative; but then the text won't wrap it.
HTML:
<html lang="sv">
<head>
<link href="layout1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="topbanner">
<h1>TopBanner</h1>
</div>
<div class="header">
<h1>Header</h1>
<h2>underrubrik</h2>
</div>
<div class="navigation">
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</div>
<div id="main">
<div class="leftsidebar">
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<li><a href="#">Page 4</a></li>
</ul>
</div>
<div class="content">
<p>Content text here</p>
</div>
</body>
</html>
CSS
body {
margin: 0;
background: #fff;
}
/* BANNER */
.topbanner {
width: 980px;
height: 80px;
margin: auto;
border: 1px solid;
text-align: center;
font-family: sans-serif;
}
/* HEADER */
.header {
width: 980px;
height: 100px;
margin: auto;
border: 1px solid;
text-align: center;
font-family: sans-serif;
}
.header h1 {
margin: 0;
}
.header h2 {
margin: 0;
}
/* NAVIGATION LINKS */
.navigation {
width: 980px;
margin: auto;
}
.navigation a {
text-decoration: none;
color: #000;
}
.navigation ul {
float: left;
margin: -10px 0 0 0;
list-style: none;
}
.navigation ul li {
display: inline;
padding: 0 10px 0 10px;
border: 1px solid;
background: #fff;
}
.navigation ul li:first-child {
border-radius: 10px 0 0 10px;
}
.navigation ul li:last-child {
border-radius: 0 10px 10px 0;
}
/* CONTENT */
#main {
width: 980px;
margin: 0 auto;
border: 1px solid;
}
.leftsidebar {
width: 20%;
position: relative;
}
.leftsidebar ul {
margin: 0;
border: 1px solid;
list-style: none;
}
.leftsidebar ul li {
}
.content {
}
.content p {
font-family: sans-serif;
}
3 answers
solution1
1 ACCPTED 2014-12-23 02:25:33
Set the following for .navigation ul styles
margin: -10px 0 -10px 0;
position: relative;
z-index: 2;
list-style: none;
Add float: left; to .leftsidebar to allow text to wrap around that, and add padding-top: 20px 30px; (adjust to your liking) to .leftsidebar ul to compensate for the overlap.
solution2
0 2014-12-23 02:28:25
尝试将padding-left：0放入您的ul容器中。
solution3
0 2014-12-23 03:03:31
Here have a look at what I did here with you code, also you haven't ended one of you h2 tags at the start.
Visit http://jsfiddle.net/4p6gdka9/ enter code here
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.