I am having some trouble with DIVs in regards to laying them side by side. An image will help.
I need to have the red box (or anything else i like) into the green outlined area. I want to try avoid things like float:left; since it ruins the formatting of the navigation bar.
I have tried using span tags around the navigation bar, using a specific amount of pixels to the left (which didn’t work, and I don’t like doing that anyway).
Please keep in mind I’m a beginner and therefore inexperienced.
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link href="navigation.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<img id="header" alt="Banner" longdesc="Text Here" src="rsc/banner_phone.jpg"/>
<div class="sidebar">
<ul class="navigation">
<li class="current"><a href=""><em class="home"></em><b>Homepage</b></a></li><br /><br />
<li><a href=""><em class="templates"> </em><b>Homepage</b></a></li><br /><br />
<li><a href="d"><em class="psd"> </em><b>Homepage</b></a></li><br /><br />
<li><a href=""><em class="tutorials"> </em><b>Homepage</b></a></li><br /><br />
<li><a href=""><em class="shop"> </em><b>Homepage</b></a></li><br /><br />
<li><a href=""><em class="contact"> </em><b>Homepage</b></a></li><br /><br />
</ul>
</div>
<div class="main">
<p>sdfds</p>
</div>
</div>
</body>
</html>
css:
/* PAGE CONTAINERS */
/* Background Color */
body {
background:#CCCCCC
}
.page {
width:80%;
margin-left:10%;
background-color:white;
box-shadow: 4px 4px 4px #000000;
}
.main {
position:absolute;
left:180px;
background-color:red;
}
/* NAVIGATION ELEMENTS */
#header {
width:100%;
height:185px;
}
.navigation {
padding:3px 0 3px 0;
margin:0;
list-style:none;background-color:#DDDDDD;
width:180px;
height:100%;
}
.navigation li a {
float:left;
height:40px;
line-height:40px;
text-decoration:none;
font-family:arial, verdana, sans-serif;
text-align:center;
padding:0 0 0 10px;
font-size:11px;
}
.navigation li a b {
float: left;
display: block;
padding: 0 20px 0 8px;
}
.navigation li.current a {
color:#0000FF;
font-weight: bold;
font-size:13px;
}
.navigation li a:hover {
color:#0000FF;
padding: 0 0px 0 20px;
}
.navigation li a em {
display:block;
float:left;
width:30px;
height:40px;
}
/* ICON ELEMENTS */
.navigation li a em.home {
background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/home.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.templates {
background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/templates.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.psd {
background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/psd.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.tutorials {
background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/tutorials.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.shop {
background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/shop.png);
background-repeat: no-repeat;
background-position: center center;
}
.navigation li a em.contact {
background-image: url(http://www.hv-designs.co.uk/tutorials/css_navigation2/nav_icons/contact.png);
background-repeat: no-repeat;
background-position: center center;
What you can do is add the css property as follows to the 2
div'syou want to display on the same line:So you would add this to the sidebar and the green box (in your image).
Remember though that this is not considered good practice.