The red bar is overlapping the topbar when it should be right below it, also even though I set the width to be 100% it's not extending the whole way across. I copied the CSS code from the topbardiv CSS, but it still wasn't working properly.
Image:
Code:
<head>
<title>Grace's WRAL</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
margin:0;
}
#topbar {
background-color:#0C1F2F;
width:100%;
height:95px;
}
.fixedwidth {
width:1095px;
margin:0 auto;
}
#logodiv {
padding:10px 0 0 45px;
float:left;
}
#topmenudiv {
}
#topmenudiv ul {
background-color:none;
padding:8px 0 0 35px;
margin:0;
height:20px;
}
#topmenudiv li {
list-style:none;
color:#008ECD;
font-size:0.9em;
font-family:Gill Sans;
border-right:1px solid #008ECD;
padding: 0 6px 0 10px;
float:left;
background-color:none;
}
#alertdiv {
color:white;
float:right;
margin-top:-22px ! important;
padding:0 334px 0 334px;
font-size:0.9em;
}
#alertdiv p {
float:right;
margin-top:1px;
font-family:Gill Sans;
padding:0 5px 0 5px;
}
#signindiv {
color:white;
float:right;
margin-top:-22px ! important;
padding:0 271px 0 271px;
}
#signindiv p {
margin-top:1px;
font-size:14px;
font-family:Baskerville;
margin-top:-8px ! important;
}
#searchdiv {
float:right;
margin-top:-33px ! important;
padding:0 55px 0 55px;
}
#searchdiv input {
height:15px;
width:190px;
background-color:#093B51;
border:none;
font-size:0.9em;
padding:5px 6px 6px 5px;
background-image:url("file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Search_Icon.png");
background-repeat:no-repeat;
background-position:right center;
}
#searchdiv input:focus {
background-color:#FFFFFF;
}
#searchdiv input::-webkit-input-placeholder {
color: white;
text-transform:none;
font-size:13px;
padding-left:5px;
}
#topicmenudiv {
}
#topicmenudiv ul {
background-color:none;
margin:0;
}
#topicmenudiv li {
list-style:none;
float:left;
color:white;
padding:15px 0 0 15px;
font-family:Gill Sans;
font-size:16px;
}
#currentweatherdiv {
float:right;
font-size:33px;
padding:8px 8px 0 0;
color:white;
}
#currentweatherdiv img {
float:right;
padding-top:4px;
}
#currentweatherimgdiv {
float:right;
padding:10px 50px 0 0;
}
.break {
clear:both;
}
#newsbardiv {
background-color:red;
width:100%;
height:95px;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="topmenudiv">
<ul>
<li>Noticias</li>
<li>Instant Savings</li>
<li>Classifieds</li>
<li>Jobs</li>
<li style="border-right:none">Real Estate</li>
</ul>
</div>
<div id="alertdiv">
<img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Alert_Icon.png" /> <p>Alert</p>
</div>
<div id="signindiv">
<p>Sign In</p>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
<div id="logodiv">
<img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/WRAL_logo.png" />
</div>
<div id="topicmenudiv">
<ul>
<li>News</li>
<li>Weather</li>
<li>Sports</li>
<li>Business</li>
<li>Consumer</li>
<li>Health & Life</li>
<li>Entertainment</li>
<li>Video</li>
</ul>
</div>
<div id="currentweatherimgdiv">
<img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Current_Weather.png" />
</div>
<div id="currentweatherdiv">
65 <img src="file:///Users/gracecline/Desktop/Web-developer/Projects/Grace's_WRAL/Images/Degrees_Icon.png" />
</div>
<div class="break"></div>
<div id="newsbardiv">
<div class="fixedwidth"></div>
</div>
</div>
</div>
</body>
</html>
The red bar is nested inside a div with the class fixedwidth, which unsurprisingly has a fixed width of 1095px. So the width of the red bar can only be 1095px.
To debug a problem such as this, simply view it in Chrome, press F12, press Ctrl-Shift-C, and click on the element you want to inspect. It will explain what's going on.
One is issue is because .fixedwidth has a width of 1095px so your div can't be 100% because since it's nested 100% = 1095px.
Change .fixedwidth to this,
.fixedwidth {
width:100%;
margin:0 auto;
}
CODEPEN DEMO
Related
I am creating a site similar to jsbin in that site i have created menubar which is in black color and below menubar there is code container which is in grey color where user will type a code my problem is the codecontainer is overlaping the menu bar little not 100% i donot want to over lap it so how do i solve this problem
here is my code
HTML
<html>
<head>
<title>CodePlayer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="StyleSheets/CodePlayerStyleSheet.css">
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<!--------------------MENUBAR---------------------------------->
<div id="menubar">
<div id="logo">CodePlayer</div>
<div id="btnrun"><button id="runbtn">Run</button></div>
<div id="menubar">
<ul id="menulist">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li style="border:none;width:15%">Output</li>
</ul>
</div>
</div>
<!-------------------------------------------------------->
<div class="emptydiv"></div>
<!------------------CODECONTAINER---------------------------------------->
<div class="codecontainer" id="htmlcontainer">
<textarea>Example</textarea>
</div>
</div>
<!--------------------------------------------------------------->
<script>
</script>
</body>
</html>
CSS
body{
margin:0;
padding:0;
}
#menubar{
background-color: #000000;
width:100%;
height:50px;
}
#logo{
font-family: 'Lobster', cursive;
color:white;
font-size:30px;
padding:5px 0 0 15px;
float:left;
}
#runbtn{
float:right;
font-size:15px;
background-color:rgba(0,0,0,1.00);
border:1px solid #FFFFFF;
width:60px;
height:20px;
border-radius:10px;
color:white;
cursor:pointer;
position:relative;
top:8px;
}
#btnrun{
padding: 12px 20px 0 0;
}
#menulist{
list-style:none;
margin:0 auto;
border:1px solid #FFFFFF;
width:296px;
height:30px;
padding:0;
position:relative;
top:2px;
}
#menulist li{
float:left;
color:white;
border-right:1px solid white;
padding:5px 12px 7px 15px;
cursor:pointer;
}
li:hover{
background-color:#FFFFFF;
color:rgba(0,36,255,1.00) !important;
}
.emptydiv{
clear:both;
}
.codecontainer{
background-color:rgba(177,177,177,1.00);
color:black;
float:left;
height:100%;
width:25%;
}
Make the following change
#menubar {
background-color: #000000;
width:100%;
height:auto;
padding: 10px; /* you can change this, but it's to add some spacing on your menubar */
}
The border after every menu item ie after news,sports,whether etc are extending the top bar the height should be similiar to the top bar should not go out of the top bar
And also the the bar below the top bar which is news bar is not displaying properly check the image link which is the required output for ref see the images click on This is correct image link below
To see the code click the link below "Click Me to see the code"
This is correct image
Click Me to see the code
**HTML**
<html>
<head>
<title> BBC NEWS</title>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="fixwidth">
<div class="bbclogo">
<img src="../Images/bbc logo.PNG"/>
</div>
<div class="signin">
<img src="../Images/Signin.PNG"/>Sign In
</div>
<div class="topmenu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>IPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="Search"/>
</div>
<div class="empty"></div>
<div class="newsbar">
<div class="fixwidth">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
<style type="text/css">
body{
margin:0;
}
.topbar{
background-color:#7A0000;
height:40px;
width:100%;
color:white;
font-family:arial,helvetica,sans-serif;
position:fixed;
}
.fixwidth{
margin:0 auto;
width:1150px;
}
.bbclogo{
padding:5px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
.signin{
padding:8px 80px 12px 20px;
font-weight:bold;
font-size:15px;
float:left;
border-right:1px solid #990000;
margin-top:3px;
}
.signin img{
position:relative;
top:1px;
}
.topmenu{
float:left;
}
.topmenu ul{
margin:0;
padding:0;
}
.topmenu li{
float:left;
list-style:none;
font-weight:bold;
font-size:15px;
border-right:1px solid #990000;
height:100%;
padding:10px 20px 0 20px;
line-height:1;
}
.search{
float:left;
padding:8px;
}
.search input{
height:25px;
border:none;
padding:3px;
font-size:12px;
font-family:Times New Roman;
font-style:italic;
background-image:url(../../../blq-search_grey_alpha.png);
background-repeat:no-repeat;
background-position:right center;
}
.empty{
clear:both;
}
.newsbar{
background-color:#990000;
height:40px;
width:100%;
color:white;
}
</style>
Removed the height of navbar and made necessary changes
Demo Link
<html>
<head>
<title> BBC NEWS</title>
<style type="text/css">
body{
margin:0;
}
.topbar{
background-color:#7A0000;
/*height:40px;*/ /* removed*/
width:100%;
color:white;
font-family:arial,helvetica,sans-serif;
position:fixed;
}
.fixwidth{
margin:0 auto;
width:1050px;
}
.bbclogo{
padding:13px;
float:left;
border-right:1px solid #990000;
padding-right:10px;
}
.signin{
padding:8px 80px 12px 20px;
font-weight:bold;
font-size:15px;
float:left;
border-right:1px solid #990000;
margin-top:3px;
}
.signin img{
position:relative;
top:1px;
}
.topmenu{
float:left;
}
.topmenu ul{
margin:0;
padding:0;
}
.topmenu li{
float:left;
list-style:none;
font-weight:bold;
font-size:15px;
border-right:1px solid #990000;
height:100%;
padding: 4px 20px 0 20px; /* changed */
line-height: 2.8; /* added */
}
.search{
float:left;
padding:8px;
}
.search input{
height:25px;
border:none;
padding:3px;
font-size:12px;
font-family:Times New Roman;
font-style:italic;
background-image:url(../../../blq-search_grey_alpha.png);
background-repeat:no-repeat;
background-position:right center;
}
.empty{
clear:both;
}
.newsbar{
background-color:#990000;
height:40px;
width:100%;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="fixwidth">
<div class="bbclogo">
<img src="../Images/bbc logo.PNG"/>
</div>
<div class="signin">
<img src="../Images/Signin.PNG"/>Sign In
</div>
<div class="topmenu">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>IPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div class="search">
<input type="text" placeholder="Search"/>
</div>
<div class="empty"></div>
<div class="newsbar">
<div class="fixwidth">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
for newsbar you have to change your height and width like below :
.newsbar{background-color:#990000; height:5000px; width:100%; color:white; }
Will definately works ☺
How come my padding isnt working on my logo div it was working before i added an extra div but i still cant see the reason it isn't working.Please check out my code to figure out if you can help me :)
<!DOCTYPE html>
<html>
<head>
<title>Learning Javacript</title>
<link href="main.css" rel="stylesheet" type="text/css">
<link href="normalize.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="contact_info">
<div class="email">
<img src="icons/icon_mail.png">
<p>contact#thislooksgreat.net</p>
</div>
<div class="phone">
<img src="icons/icon_phone.png">
<p>+40.727.123.456</p>
</div>
<div class="Social_Media">
<ul>
<li><img src="Social/facebook.png"></li>
<li><img src="Social/twitter.png"></li>
<li><img src="Social/youtube.png"></li>
<li><img src="Social/googleplus.png"></li>
<li><img src="Social/linked.png"></li>
</ul>
</div>
<div class="language">
<p>ENGLISH</p>
<img src="icons/arrow.png">
</div>
</div>
</header>
<div class="main_real">
<div class="main_img">
<div class="main_nav_width">
<div class="main_nav">
<div class="logo">
<img src="Logo/logo.png">
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>News</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</body>
</html>
html,body,h1,h2,h3,h4,h5,h6,p,li,ul,a,nav{
padding:0px;
margin:0px;
}
header{
width:100%;
background-color:#143e6e;
height:40px;
border-top:6px solid #0d2f57;
}
.contact_info{
width:1200px;
margin:0 auto;
}
.contact_info p, img{
float:left;
}
.email p,img{
float:left;
}
.email .phone, p{
padding-top:12px;
padding-right:60px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:white;
}
.email img{
padding-top:11px;
padding-right:10px;
}
.phone p,img{
float:left;
}
.phone img{
padding-top:7px;
}
.Social_Media ul{
padding-top:10px;
padding-left:25px;
float:right;
}
.Social_Media li{
display:inline;
}
.Social_Media img{
padding-right:25px;
}
.Social_Media li:last-child img {
padding-right:0px
}
.language{
float:right;
}
.language p{
padding-right:0px;
}
.language img{
padding-top:15px;
padding-left:5px;
}
.main_nav_width{
width:100%;
background-color:white;
box-shadow: 0 5px 6px -6px black;
}
.main_nav{
width:1200px;
margin:0 auto;
height:90px;
}
}
.logo{
clear:both;
float:left;
padding-top:15px;
}
nav ul{
float:right;
padding-top:35px;
height:55px;
}
nav li{
display:inline;
}
nav li:last-child a{
margin-right:0px;
}
nav a{
width:50px;
margin-right:20px;
margin-left:20px;
padding-top:33px;
padding-bottom:40px;
text-decoration:none;
height:90px;
color:#143e6e;
}
nav a:hover {
width:90px;
padding-top:35px;
text-decoration:none;
height:15px;
color:#143e6e;
border-bottom:5px solid blue;
padding-bottom:33px;
}
nav li:last-child a:hover{
width:70px;
margin-left:20px
}
.main_img{
background-image: url("images/imac.png");
background-repeat:no-repeat;
background-position: 780px 64px;
background-repeat: no-repeat;
background-size:500px 500px;
width:100%;
height:650px;
}
.main_real{
background-image: url("images/background_jumbo.jpg");
background-repeat:no-repeat;
background-position: right top;
background-size:100% 480px;
width:100%;
}
Check your brackets. The extra curly brace might be throwing you off. If not try get a JSFiddle up.
.main_nav{
width:1200px;
margin:0 auto;
height:90px;
}
}
.logo{
clear:both;
float:left;
padding-top:15px;
}
I am trying to clone the BBC website for educational purposes.
My newsbar and topicdiv divs refuse to fill the width of the screen. I would like some help understanding as to why and how I can remedy the problem.
Any help would be greatly appreciated.
<!doctype html>
<html>
<head>
<title>Darren's BBC</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
background-color:violet;
/* This ensures the topbar stretches all the way across the screen and fills the top */
}
#topbar {
background-color:rgb(255,255,255);
width:100%;
height:40px;
color:black;
font-family:arial,helvetica,sans-serif;
font-weight:bold;
font-size:0.8em;
}
.fixedwidth {
width:1000px;
margin:0 auto;
}
#logodiv {
padding-top:4px;
padding-right:5px;
padding-bottom:4px;
float:left;
border-right:1px solid #DDDDDD;
}
#signindiv {
padding:8px 85px 11px 15px;
float:left;
border-right:1px solid #DDDDDD;
}
#signindiv img {
position:relative;
top:3px;
padding-right:2px;
}
#menudiv ul {
margin:0;
}
#menudiv li {
padding:14px 17px 10px 17px;
list-style:none;
float:left;
border-right:1px solid #DDDDDD;
}
#searchdiv {
float:left;
padding:8px 0 0 10px;
}
#searchdiv input {
border:none;
background-color:#E4E4E4;
height:24px;
width:190px;
font-weight:bold;
font-size:0.9em;
padding:0 5px 0 5px;
background-image:url("images/search.png");
background-repeat:no-repeat;
background-position:right center;
}
#newsbar {
background-color:#BB1919;
height:55px;
}
#newsbar p {
margin:0;
font-size:2.7em;
color:white;
font-family:Verdana, Geneva, sans-serif;
padding-left:50px;
}
.break {
clear:both;
}
#topicdiv {
margin:0;
background-color:#A91717;
width:100%;
height:37px;
}
#topicdiv ul {
margin:0;
padding:12px 0 5px 37px;
}
#topicdiv li {
color:white;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
list-style:none;
float:left;
border-right:1px solid #B73C3C;
padding-left:11px;
padding-right:11px;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" />
</div>
<div id="signindiv">
<img src="images/signin.png" /> Sign In
</div>
<div id="menudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>Shop</li>
<li>Earth</li>
<li>Travel</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
<div class="break"></div>
<div id="newsbar">
<p>NEWS</p>
</div>
<div class="break"></div>
<div id="topicdiv">
<ul>
<li>Home</li>
<li>Video</li>
<li>World</li>
<li>Asia</li>
<li>UK</li>
<li>Business</li>
<li>Tech</li>
<li>Science</li>
<li>Magazine</li>
<li>Entertainment & Arts</li>
<li>Health</li>
<li>World News TV</li>
<li style="border-right:none">More...</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Both of those divs are nested in a fixed width div that has a width of 1000px. Percentages are worked out using the space available to that object, so 100% for those divs would be 1000px rather than the full width of your screen.
Just switch these 2 divs:
<div class="fixedwidth">
<div id="topbar">
Switching them will make #topbar to inherit its parent width.
demo
Here is what I did:
.fixedwidth {
//width:1000px;
margin:0 auto;
}
#topicdiv {
margin:0;
background-color:#A91717;
width:100%;
//height:37px;
position:absolute;
}
Here is the JSFiddle demo
<!doctype html>
<html>
<head>
<title>Darren's BBC</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
background-color:violet;
<!--This ensures the topbar stretches all the way across the screen and fills the top-->
}
#topbar {
background-color:rgb(255,255,255);
width:100%;
height:40px;
color:black;
font-family:arial,helvetica,sans-serif;
font-weight:bold;
font-size:0.8em;
}
.fixedwidth {
width:1000px;
margin:0 auto;
}
#logodiv {
padding-top:4px;
padding-right:5px;
padding-bottom:4px;
float:left;
border-right:1px solid #DDDDDD;
}
#signindiv {
padding:8px 85px 11px 15px;
float:left;
border-right:1px solid #DDDDDD;
}
#signindiv img {
position:relative;
top:3px;
padding-right:2px;
}
#menudiv ul {
margin:0;
}
#menudiv li {
padding:14px 17px 10px 17px;
list-style:none;
float:left;
border-right:1px solid #DDDDDD;
}
#searchdiv {
float:left;
padding:8px 0 0 10px;
}
#searchdiv input {
border:none;
background-color:#E4E4E4;
height:24px;
width:190px;
font-weight:bold;
font-size:0.9em;
padding:0 5px 0 5px;
background-image:url("images/search.png");
background-repeat:no-repeat;
background-position:right center;
}
#newsbar {
background-color:#BB1919;
height:55px;
}
#newsbar p {
margin:0;
font-size:2.7em;
color:white;
font-family:Verdana, Geneva, sans-serif;
padding-left:50px;
margin: 0 auto;
width: 1000px;
}
.break {
clear:both;
}
#topicdiv {
margin:0;
background-color:#A91717;
width:100%;
height:37px;
}
#topicdiv ul {
margin:0;
padding:12px 0 5px 37px;
margin: 0 auto;
width: 1000px;
}
#topicdiv li {
color:white;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
list-style:none;
float:left;
border-right:1px solid #B73C3C;
padding-left:11px;
padding-right:11px;
}
</style>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" />
</div>
<div id="signindiv">
<img src="images/signin.png" /> Sign In
</div>
<div id="menudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>Shop</li>
<li>Earth</li>
<li>Travel</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="break"></div>
<div id="newsbar">
<p>NEWS</p>
</div>
<div class="break"></div>
<div id="topicdiv">
<ul>
<li>Home</li>
<li>Video</li>
<li>World</li>
<li>Asia</li>
<li>UK</li>
<li>Business</li>
<li>Tech</li>
<li>Science</li>
<li>Magazine</li>
<li>Entertainment & Arts</li>
<li>Health</li>
<li>World News TV</li>
<li style="border-right:none">More...</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I have developed my website on my desktop.All divs are in their place but when I open the same page in a laptop or larger screen desktop all the divs are getting disordered.What should I do.even the same problem is coming on zoomin and zoom out. some of my css code is-
body {
margin:0;
padding:0;
width:100%;
color:#5f5f5f;
font:normal 12px/1.8em Arial, Helvetica, sans-serif;
}
html, .main { padding:0; margin:0; background:url(images/body_bg.jpg) repeat-x top; }
.clr { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}
/* header */
.header { margin:15; background-color:White;}
.header_resize { margin:5px auto; padding:0; width:970px;}
.header .logo { width:auto; float:left; padding:5px 0 0 25px;}
.header .menu ul { margin:38px 20px 0 2px; padding:0; float:right; width:auto; list-style:none;}
.header .menu ul li { margin:0 4px; float:left; background:url(images/menu.jpg) repeat-x top; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.header .menu ul li a { display:block; margin:0; padding:3px 8px 3px 8px; color:#5f5f5f; text-decoration:none;}
.header .menu ul li a:hover, .header .menu ul li.active a { color:#fff; background:url(images/menuover.jpg) repeat-x top; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
/* hbg */
.hbg {
background-color:transparent;
float:left;
margin:0 0 0 45px;
padding:65px 456px 0 56px;
width:137px;
height:160px;
background:#fff url(images/soluinfo.jpg) no-repeat top left;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
/*solutions*/
.solu{ background-color:transparent;}
.solu_resize { margin:0 auto; padding:0; width:auto; }
.solu .smenu ul { margin:0 0 0 45px; padding:0; float:left; width:auto; list-style:none; }
.solu .smenu ul li { margin:0 0; float:left; }
.solu .smenu ul li a { display:block; margin:0; padding:0; color:#5f5f5f; text-decoration:none;}
.solu_resize img{ float:left; padding:0 0 0 0;}
/*sidebar*/
.sidebar {
margin:0 40px 0 0;
padding:0;
float:right;
width:260px;
}
/* content */
.content { padding-bottom:1px; }
.content_resize {border-top:none; }
.content .mainbar {
margin:3px 0 0 -12px;
padding:0; float:left;
border-width:1px;
border-style: solid;
border-color: Lightgray;
width:649px;
min-height:320px;
background-color:white;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.content .mainbar .article_vert {
margin:0;
padding:10px 0px 10px 10px;
float:left;
width:313px;
background-color:White;
}
I dont know what's the problem.
HTML code
<div class="main">
<!--start header-->
<div class="header">
<div class="header_resize">
<div class="logo">
<img src="images/logo.jpg" width="95%" alt="Airlink" border="0" />
</div>
<div class="menu">
<ul>
<li class="active">HOME</li>
<li >COMPANY</li>
<li >SOLUTIONS</li>
<li >SERVICES</li>
<li >NEWS & EVENTS</li>
<li >BLOGS</li>
<li >CONTACTS</li>
</ul>
</div>
<div class="clr">
</div>
</div>
</div>
<!--end header-->
<!--start mouseover info panal-->
<div class="hbg">
<div class="solu_info" id="loadinfo">
<div class="solu_head" >
<font size="3" ><b>Complete Solution For<br> Wireless Connectivity</b></font>
</div>
</div>
</div>
<div class="sidebar">
<div class="serv">
<font size="3" ><b>Services</b></font><img src="images/serv.jpg" align="right">
<hr size="0px" width="78%" color="#4AA02C" align="left" >
<ul class="sb_menu">
<li >Managed Services</li>
<p id="servinfo1" class="servinfo"> Service Info 1 </p>
<li >Turnkey Services</li>
<p id="servinfo2" class="servinfo">Service Info 2 </p>
<li>Value Added Sevices</li>
<p id="servinfo3" class="servinfo">Service Info 3 </p>
</ul>
</div>
</div>
<div class="solu">
<div class="solu_resize">
<div class="smenu">
<ul>
<li id="d1"><img src="images/menu_hosp.jpg" border="0"></li>
<li id="d2"><img src="images/menu_edu.jpg" border="0"></li>
<li id="d3"><img src="images/menu_enter.jpg" border="0"></li>
<li id="d4"><img src="images/menu_retail.jpg" border="0"></li>
<li id="d5"><img src="images/menu_health.jpg" border="0"></li>
<li id="d6"><img src="images/menu_real.jpg" border="0"></li>
<li id="d7"><img src="images/menu_tel.jpg" border="0"></li>
</ul>
</div>
</div>
</div>
.....
Use a wrapper with a fixed width to avoid these kind of problems.
<div id="wrapper">
// All the HTML in body
</div>
#wrapper{width:960px;}