fill right and left border
Question
i have created a basic webpage, i have the main content centered, but I want to fill the white space either side of the content. http://hometown.net46.net/test.html this is what I have. I want to fill the white space on the right and left. Note - the webpage is a flexible box. Here is my html:
<head>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="big_wrapper">
<nav id="top_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="posts.php">Posts</a></li>
<li><a href="booking.php">Booking</a></li>
<li><a href="contact.php">Contact us</a></li>
</ul>
</nav>
<header id="top_header">
<h2>Image here</h2>
</header>
<div id="new_div">
<section id="main_section">
<article>
<header id="welc">
<h2>Welcome to the lounge!</h2>
</header>
<p>The lounge is a youth group for 11 - 18 year olds. We are located in Eastbourne.</p>
</article>
<article>
<header id="article2">
<h2>The lounge website created!!</h2>
</header>
<p>blahblahblahg.</p>
</article>
</section>
<aside id="side_news">
<h4><u>News:</u></h4>
<p>Lounge painting - 13th march</p>
</aside>
</div>
<footer id="footer">
Hosted by <a href="http://joomla.com">Joomla</a>
</footer>
</div>
</body>
And my css:
*{
margin: 0px;
padding:0px;
}
h2{
font:bold 20px tahoma;
}
h4{
font:bold 14px tahoma;
}
header, section, footer, aside, nav, article{
display:block;
}
body{
width:100%;
display:-webkit-box;
-webkit-box-pack: center;
}
#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header{
background:yellow;
border:3px solid black;
padding:20px;
}
#top_menu{
border:red;
background:#DBD7D9;
border-radius:2px;
}
#top_menu li{
display:inline-block;
list-style:none;
padding:5px;
font:bold 20px tahoma;
height:30px;
}
#top_menu a{
color:black;
text-decoration:none;
}
#top_menu li:hover{
background:yellow;
}
#new_div {
display:-webkit-box;
-webkit-box-orient:horizontol;
}
#main_section{
border:1px solid blue;
-webkit-box-flex: 1;
margin:20px;
padding:20px;
}
#side_news{
border:1px solid red;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC
}
#footer{
text-align:center;
padding:20px;
border-top: 2px solid green;
}
1 answers
solution1
1 ACCPTED 2013-04-09 14:11:17
One way to fill the white space to the left and right of the centered content on your site would be to wrap the main-content div in another container div and give the container div a background color
<div id="container">
<div id="main-content">
</div>
</div>
CSS:
#container{
width: 960px;
background: #ccc;
}
#main-content{
width: 800px;
margin: 0 auto;
}
Working example:
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.