I have a header that is centering over one half of my div rather than the entire div. Please help!
Here is the HTML:
<div id="services"> <span2>Fees and Insurance</span2>
Here is the CSS:
#services {
height:500px;
background:#f9fbfb;
text-align:center;
font-weight:100;
font-size:35px;
padding:50px;
}
span2 {
font-size:40px;
margin-left:px;
text-align:center;
}
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<title>Website</title>
<meta name="author" content="WebDev">
<link href="example.css" rel="stylesheet" type="text/css" />
<style>
html {
font-family: "Open Sans";
font-size: 24px;
font-style: light;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
body {
background: linear-gradient(#fff 30%, #CCFFFF );
margin-top:10px ;
margin-right:75px;
margin-left:75px;
}
#container {
width:1300px;
margin:0 auto;
background:#iff;
}
#header {
width:100%;
height:170px;
background:#Fff;
}
#logo {
float:left;
width:400px;
height:85px;
margin:30px;
background:#fff;
color: #000;
font-size: 40px;
line-height:35px;
position:absolute;
}
span1 { font-size: 30px;
line-height: 18px;
}
#navbar {
height:20px;
clear:both;
background: #Fff;
}
#navbar ul {
margin:10px;
padding:1px;
list-style-type:none;
line-height: 40px;
}
#navbar ul li {
padding:px;
float:right ;
margin-top:120px;
}#navbar ul li a {
font-size:24px;
float:right ;
float:right ;
padding:0 0 0 20px;
display:block;
text-decoration:none;
font-weight:100;
color:#000;
}
#services {
height:500px;
background:#f9fbfb;
text-align:center;
font-weight:100;
font-size:35px;
padding:50px;
}
span2 {
font-size:40px;
margin-left:px;
text-align:center;
}
#foot {
font-size:25px;
font-weight: 200;
margin-right:75px;
margin-left:90px;
line-height:40px;
margin-top:50px;
}
#test {
height: 300px;
width: 480px;
background-image: url(http://www.berkeleywellness.com/sites/default/files/field/image/ThinkstockPhotos-471791462_1_field_img_hero_988_380.jpg);
background-repeat: no-repeat;
margin-top:85px;
margin-right:;
margin-left:90px;
border-radius:25px;
float:left;
overflow:hidden;
background-position:90%;
background-size:172%
clear:both;
}
ul2 {
text-align:left;
font-size:20px;
float:right;
position:relative;
width:550px;
margin-top:57px;
line-height:35px;
list-style:none;
margin-right:60px;
clear:both;
}
p2 {
text-align:left;
font-size:20px;
}
h4 {
text-align:center;
margin: 60px;
font-weight:;
float:center;
}
#end {
height:180px;
}
</style>
</head>
<body>
<!-- container -->
<div id="container">
<!-- header -->
<div id="header">
<div id="logo">
James Brewer, M.D. <span1> santa barbara pediatrician </span1>
</div>
<div id="navbar">
<ul>
<li>contact </li>
<li>gallery |</li>
<li>fees & insurance |</li>
<li>hours & location |</li>
<li>services |</li>
<li>about |</li>
</ul>
</div>
</div>
<!-- content area -->
<div id="content_area">
<div id="services"> <span2>Fees and Insurance</span2>
<div id="test"></div>
<div id="text">
<ul2>
<li>The office accepts all PPO insurance.</li>
<li> </li>
<li>We accept Cencal and Medi-cal.</li>
<li> </li>
<li>New patient consultations are provided at no cost.</li>
<li> </li>
<li>We regret that we do not take HMO insurance.</li>
</ul2>
</div>
</div>
</div>
<div id=end>
<h4>
<p id="foot">2421 Bath Street, Suite A
</p><p id="foot">
Call for an appointment today
1-805-563-0167
</p>
</h4>
</div>
</div><!-- end container -->
</body>
</html>
Related
body{
background: #d4d4d4;
width:100%;
font-family: Helvetica, Arial, sans-serif;
margin:0px;
padding:0px;
}
.container{
background:#ffffff;
margin: 0px auto;
width: 50%;
}
.header-1{
background-color:#000000;
padding:0px 20px 0px 20px;
height:40px;
}
.header-1 p{
float:right;
font-size: 12px;
color:white;
}
span{
font-size:11px;
position:relative;
right:-145px;
color:white;
}
.logo{
float: left;
width:149px;
height:26px;
padding-top:10px;
}
.delivery{
float:right;
color: black;
}
.loop{
clear:both;
text-align: center;
}
.brand{
list-style-type: none;
}
.brand li{
display:inline-block;
background: #000000;
color:white;
margin-left:-40px;
margin-right:30px;
font-weight:bold;
width:86px;
height:28px;
vertical-align: middle;
}
.header-banner{
width:600px;
height:40px;
}
.header-banner img{
width:570px;
}
.official h1{
margin-left: 30px;
}
.official p{
margin-left:30px;
font-size: 13px;
}
.order-info{
list-style-type:none;
}
.order-info li{
display:inline-block;
margin-right:30px;
}
.product-image{
float:left;
}
.product-image img{
margin-left:30px;
}
.product-container{
float:right;
}
.price-list{
list-style-type: none;
}
.price-list li{
display:inline-block;
margin-left:30px;
margin-right:3px;
}
.price-table{
float:right;
}
.price-total{
column-count: 2;
list-style-type: none;
column-gap:2px;
}
.line-4{
width:100%;
size:20;
color:black;
}
<div class="">
<ul class="order-info">
<li><h3>Order Info</h3><hr><p>Order#: 445501<br>
Order Date: 26 de junio de<br> 2017</p></li>
<li><h3>Bill To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
<li><h3>Ship To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
</ul>
</div>
<hr size="3" color="black">
<div>
<div class="product-image">
<img src="http://s7d3.scene7.com/is/image/LuxotticaRetail/679420297255_shad_qt?wid=150&hei=65&fmt=jpeg&qlt=65&op_usm=2.0,0.2,0,0&op_sharpen=0">
</div>
<div class="price-container">
<ul class="price-list">
<li><h4>Model</h4><hr><p>Model:<br>
SKU: 679420297255<br></p></li>
<li><h4>Quantity</h4><hr><p>1</p></li>
<li><h4>Quantity</h4><hr><p>191.60</p></li>
<li>Status:Cancelled</li>
</ul>
<hr>
</div>
<div class="price-table">
<ul class="price-total">
<li>Sub-total (includes VAT)</li>
<li>Packaging & Postage</li>
<li>Order Total</li>
<li>�191.60</li>
<li>�0.00</li>
<li>�191.60</li>
</ul>
</div>
</div>
<hr class="line-4">
I'm new to html and css. I have been trying to make an email template using html and css but it's not in the right away.The <hr> alignments are not proper.I have attached a screen shot as to how the look should be.
Should I have to use relative and absolute positioning or normal floats/ul and li. It would be helpful if someone gives me an insight on it. Thank You.
I have fixed the <hr> alignment. I have also made few more changes.
.price-list li{
display:inline-block;
margin-left:30px;
margin-right:3px;
vertical-align: text-top; //This is used to align all li from top
}
Here is the plunker: https://plnkr.co/edit/04dN4PDB3LjLHBjAOGbZ?p=preview
/* Styles go here */
body{
width:100%;
font-family: Helvetica, Arial, sans-serif;
margin:0px;
padding:0px;
}
.container{
background:#ffffff;
margin: 0px auto;
width: 50%;
}
.header-1{
background-color:#000000;
padding:0px 20px 0px 20px;
height:40px;
}
.header-1 p{
float:right;
font-size: 12px;
color:white;
}
span{
font-size:11px;
position:relative;
right:-145px;
color:white;
}
.logo{
float: left;
width:149px;
height:26px;
padding-top:10px;
}
.delivery{
float:right;
color: black;
}
.loop{
clear:both;
text-align: center;
}
.brand{
list-style-type: none;
}
.brand li{
display:inline-block;
background: #000000;
color:white;
margin-left:-40px;
margin-right:30px;
font-weight:bold;
width:86px;
height:28px;
vertical-align: middle;
}
.header-banner{
width:600px;
height:40px;
}
.header-banner img{
width:570px;
}
.official h1{
margin-left: 30px;
}
.official p{
margin-left:30px;
font-size: 13px;
}
.order-info{
list-style-type:none;
}
.order-info li{
display:inline-block;
margin-right:30px;
}
.product-image, .price-container{
float:left;
}
.price-container {
width: calc(100% - 200px);
}
.product-image {
width: 180px;
}
.product-image img{
margin-left:30px;
}
.product-container{
float:right;
}
.price-list{
list-style-type: none;
padding: 0;
margin: 0;
}
.price-list h4 {
margin-top: 0;
}
.price-list li{
display:inline-block;
margin-left:30px;
margin-right:3px;
vertical-align: text-top;
}
.price-table{
float:right;
}
.price-total{
column-count: 2;
list-style-type: none;
column-gap:2px;
}
.line-4{
width:100%;
size:20;
color:black;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="">
<ul class="order-info">
<li><h3>Order Info</h3><hr><p>Order#: 445501<br>
Order Date: 26 de junio de<br> 2017</p></li>
<li><h3>Bill To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
<li><h3>Ship To</h3><hr><p>Sergio Piana<br>
VIA CRESPI BENIGNO<br>
11111111111</p></li>
</ul>
</div>
<hr size="3" color="black">
<div>
<div class="product-image">
<img src="http://s7d3.scene7.com/is/image/LuxotticaRetail/679420297255_shad_qt?wid=150&hei=65&fmt=jpeg&qlt=65&op_usm=2.0,0.2,0,0&op_sharpen=0">
</div>
<div class="price-container">
<ul class="price-list">
<li><h4>Model</h4><hr><p>Model:<br>
SKU: 679420297255<br></p></li>
<li><h4>Quantity</h4><hr><p>1</p></li>
<li><h4>Quantity</h4><hr><p>191.60</p></li>
<br>
<li>Status:Cancelled</li>
</ul>
<hr>
</div>
<div class="price-table">
<ul class="price-total">
<li>Sub-total (includes VAT)</li>
<li>Packaging & Postage</li>
<li style='border-top:1px solid black;margin-top:20px;padding-top:18px'>Order Total</li>
<li>�191.60</li>
<li >�0.00</li>
<li style='border-top:1px solid black;margin-top:18px;padding-top: 18px'>�191.60</li>
</ul>
</div>
</div>
<hr class="line-4">
</body>
</html>
I have a div that I would like to fill with an image. It won't show up though.
Here is html:
<div id=services>
<p1>Services</p1>
<div id="test"></div>
</div>
Here is CSS:
#test {
background-image: url(pics/chart.png);
background-repeat: no-repeat;
background-size:100%;
height:200px;
width:200px;
margin:auto;
position:absolute;
}
This is the full code:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<title>Website</title>
<meta name="author" content="WebDev">
<link href="example.css" rel="stylesheet" type="text/css" />
<style>
html {
font-family: "Open Sans";
font-size: 24px;
font-style: light;
font-variant: normal;
font-weight: 500;
line-height: 26.4px;
}
body {
background: linear-gradient(#fff 30%, #CCFFFF );
margin-top:10px ;
margin-right:75px;
margin-left:75px;
}
#container {
width:1300px;
margin:0 auto;
background:#iff;
}
#header {
width:100%;
height:170px;
background:#Fff;
}
#logo {
float:left;
width:400px;
height:40px;
margin:30px;
background:#Fff;
color: #000;
font-size: 40px;
line-height:38px;
}
span1 { font-size: 30px;
line-height: 18px;
}
#navbar {
height:40px;
clear:both;
background: #Fff;
}
#navbar ul {
margin:10px;
padding:1px;
list-style-type:none;
line-height: 40px;
}
#navbar ul li {
padding:px;
float:right ;
margin-top:20px;
}
#navbar ul li a {
font-size:24px;
float:right ;
float:right ;
padding:0 0 0 20px;
display:block;
text-decoration:none;
font-weight:100;
color:#000;
}
#services {
height:450px;
background:#f9fbfb;
text-align:center;
font-weight:100;
font-size:35px;
padding:50px;
}
p {
font-size:25px;
font-weight: 200;
margin-right:75px;
margin-left:90px;
line-height:40px;
margin-top:50px;
}
#test {
background-image: url(pics/chart.png);
background-repeat: no-repeat;
background-size:100%;
height:200px;
width:200px;
margin:auto;
position:absolute;
}
h4 {
text-align:center;
margin: 60px;
font-weight:;
float:center;
}
#end {
height:200px;
}
</style>
</head>
<body>
<!-- container -->
<div id="container">
<!-- header -->
<div id="header">
<div id="logo">
James Brewer, M.D. <span1> santa barbara pediatrician </span1>
</div>
<div id="navbar">
<ul>
<li>contact </li>
<li>gallery |</li>
<li>fees & insurance |</li>
<li>hours & location |</li>
<li>services |</li>
<li>about |</li>
</ul>
</div>
</div>
<!-- content area -->
<div id="content_area">
<div id=services> <p1>Services</p1>
<div id="test"></div>
</div>
</div>
<div id=end>
<h4>
<p>2421 Bath Street, Suite A
</p><p>
Call for an appointment today
1-805-563-0167
</p>
</h4>
</div>
</div><!-- end container -->
</body>
</html>
There are a couple of ways to solve this issue.
You can specify both horizontal and vertical values for background size: property in your css. Try playing around with those values.
You can also try property values like auto and length.
Here's some code. Here I have set the width to auto and height to 100% so that the aspect ratio is maintained and the background scales automatically with the size of the div. Check it out.
#test {
background-image: url(https://s19.postimg.org/an381cz4j/470766057_3f1e9a3933_b.jpg);
background-repeat: no-repeat;
background-size: auto 100%;
height:200px;
width:200px;
background-color: red;
}
<div id=services> <p1>Services</p1>
<div id="test"></div>
</div>
In your css file the url image must be enclosed in double quotes. Like this:
#test {
background-image: url("pics/chart.png"); /* <-- */
background-repeat: no-repeat;
background-size:100%;
height:200px;
width:200px;
margin:auto;
position:absolute;
}
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
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>