I have the menu on the bottom of the page, and I'm trying to center the wrapper div
with logo and buttons inside the doc. The centering doesn't work. Can you guys tell me why?
I want the logo to float to the left, and buttons to float to the right, but the wrapper div must be centered.
Here's the code:
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
margin-left:30px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
To center a block level element horizontally, the easiest method is to apply a width and set margin-left and margin-right to auto (or margin: auto; or margin: 0 auto;).
Since you already have a width on .navigation, just apply margin: auto to .navigation and it will center horizontally.
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
margin: auto;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
margin-left:30px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
By default html elements are left aligned. (like your .navigation)
if you add a margin:auto on a block element(note: wrapper div is a block element) it will add up the remaining space to the viewport and add a left-margin and right-margin to the block element, so it will look centered.
So, giving a margin:auto styling to the wrapper div will do the job.
just like this:
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
margin:0 auto;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
Related
This question already has answers here:
How to align 3 divs (left/center/right) inside another div?
(21 answers)
Closed 1 year ago.
My question is why is that third div( class= "right") goes downward??
I tried using vertical-align:top; also but didn't work.
I want div.nav to be at mid and div.right to be at right with all three of them being at the same top postition
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.left{
float:left;
display:inline-block;
}
.nav{
display:block;
width:20%;
margin:auto;
}
.right{
float:right;
display: block;
vertical-align: top;
}
.group:before,
.group:after{
content:"";
display:table;
}
.group:after{
clear:both;
}
.group{
zoom:1;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
Answering your question
You used display: block;. display: block will take a 100%. If you want the div to only take the width of the item itself then use display: inline-block;
Fixing your code
Use display: flex; with justify-content: space-between; and remove all the other stuff. You can also add other divs in the header but flex will position them perfectly
That means you can also remove the classes from the divs in the header
Optimized Code:
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
header {
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
Example with more Divs in the header:
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
header {
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
</header>
</body>
</html>
floatting elements will make a break before floatting if anything in the regular flow stands before it , that's why .right shows right under .nav.
You can set .nav after the floatting elements in the code, so it doesn't disturb the floatting elements.
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.left{
float:left;
}
.nav{
display:block;
width:20%;
margin:auto;
}
.right{
float:right;
}
.group:before,
.group:after{
content:"";
display:table;
}
.group:after{
clear:both;
}
.group{
zoom:1;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="right">right</div>
<div class="nav">Nav</div>
</header>
</body>
</html>
Nowdays, flex or grid is used for this
flex
body {
margin: 0px;
padding: 0px;
background-color: red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.top-header {
display: flex;
}
.nav {
width: 20%;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
grid
body {
margin: 0px;
padding: 0px;
background-color: red;
}
.top-header {
display: grid;
grid-template-columns: auto 20% auto;
justify-content: space-between
}
.left {}
.nav {}
.right {}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.left{
float:left;
display:inline-block;
width: 50%;
}
.nav{
display: inline-block;
}
.right{
display:inline-block;
float:right;
display: block;
vertical-align: top;
}
.group:before,
.group:after{
content:"";
display:table;
}
.group:after{
clear:both;
}
.group{
zoom:1;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
Try using display:inline-block; on all divs. Then you can set the location of the nav with width of the first div
Hi guys i have a problem with overlap this is a full header with a background image and i have some content also a button but is pushing out of header,how i can fix this?
What i am trying to do is full header with a background but i am stuck here.
Thank you for helpLook what is the problem
html, body {
height: 100%;
padding:0;
margin:0;
}
h1{
margin:0;
}
.wrap{
margin:0 auto;
width:950px;
height:100%;
}
header {
background:url("https://unsplash.com/#aidanjjmeyer?photo=ckrUhWyTde8");
background-size:cover;
background-repeat:no-repeat;
width:100%;
height:100vh;
}
.text{
text-align: Center;
position: relative;
top: 50%;
}
.menu{
padding-top:30px;
}
.bar1 , .bar2 , .bar3{
width:35px;
height:3px;
background-color:#262626;
margin:6px 0;
}
.btn{
border:1px solid aqua;
background:transparent;
font-size:25px;
color:white;
outline:none;
}
#about{
height:300px;
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="custom.css">
<title>Journal</title>
</head>
<body>
<header>
<div class="wrap">
<div class="menu">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="text">
<h1>Brooke Journalist</h1>
<button class="btn">Contact</button>
</div>
</div>
</header>
<section id="about">
</section>
</body>
</html>
I was working on a project last three months and I stopped for something else, now Im back to continue and Im facing a problem.
Before I start explain my problem, I would invite you to run this snippet so that you will understand more my problem:
/***************Style.css**************/
/* Circular Content Carousel Style */
.ca-container{
position:relative;
margin:25px auto 20px auto;
width:1200px;
height:700px;
}
.ca-wrapper{
width: 1200px;
height:100%;
position:relative;
}
.ca-item{
position:relative;
float:left;
width:330px;
height:100%;
text-align:center;
}
.ca-item-main{
position:absolute;
right:80px;
bottom:5px;
background:#fff;
overflow:hidden;
width: 325px;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-nav span{
width:25px;
height:38px;
background:transparent url(https://photos-2.dropbox.com/t/2/AADIMMteRhEB2NiHzX_Z0MquXnxppt4ivpdmarz52rDyOQ/12/226666032/png/32x32/1/_/1/2/arrows.png/EO2pmKoBGH0gAigC/aALpyYLbAaADO2-Ebio68A3s-L7ioYLKSv_9ocokcRY?size=1024x768&size_mode=3) no-repeat top left;
position:absolute;
top:50%;
margin-top:-19px;
left:-40px;
text-indent:-9000px;
opacity:0.7;
cursor:pointer;
z-index:100;
}
.ca-nav span.ca-nav-next{
background-position:top right;
left:auto;
right:-40px;
}
.ca-nav span:hover{
opacity:1.0;
}
/**********Demo.cs*****************/
#import url('reset.css');
/* General Demo Style */
body{
background:#e4ebe9 url(../images/pattern.png) repeat top left;
color:#000;
font-family: 'PT Sans Narrow', Arial, sans-serif;
font-size:12px;
}
a{
color:#000;
text-decoration:none;
}
.clr{
clear:both;
}
h1, h5{
margin:15px;
font-size:44px;
color:#000;
font-family: 'Rochester', sans-serif;
text-shadow:1px 1px 1px #fff;
text-align:center;
}
h1 span, h5{
font-size:20px;
display:block;
color:#60817a;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Circular Content Carousel with jQuery" />
<meta name="keywords" content="jquery, conent slider, content carousel, circular, expanding, sliding, css3" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" media="all" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow&v1' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Coustard:900' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Rochester' rel='stylesheet' type='text/css' />
</head>
<body>
<div class="container">
<div id="ca-container" class="ca-container">
<div class="ca-wrapper">
<div class="ca-item ca-item-1">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://photos-4.dropbox.com/t/2/AABfvRL8isymJa1pWpA-ta-oyC1pyOUPWec4nRnWS_SiHA/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHwgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://photos-4.dropbox.com/t/2/AABfvRL8isymJa1pWpA-ta-oyC1pyOUPWec4nRnWS_SiHA/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHwgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://photos-4.dropbox.com/t/2/AABfvRL8isymJa1pWpA-ta-oyC1pyOUPWec4nRnWS_SiHA/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHwgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.contentcarousel.js"></script>
<script type="text/javascript">
$('#ca-container').contentcarousel();
</script>
</body>
</html>
After running the snippet, you will see three blocs, the image in each bloc has a size of 380x650. I would like to display the entire image in the bloc but Im unable, Whenever I try, the size of the image which will be displayed is 375x650, instead of 380x650.
I have been playing around with the value but no amelioration.
Please let me know how to fix this problem.
Sorry for the english, Im not a native english speaker, Im trying my best
It's now with width: 380px; and looks ok.
/***************Style.css**************/
.ca-item-main .wrapper img {
width: 100%;
}
/* Circular Content Carousel Style */
.ca-container{
position:relative;
margin:25px auto 20px auto;
width:1200px;
height:700px;
}
.ca-wrapper{
width: 1200px;
height:100%;
position:relative;
}
.ca-item{
position:relative;
float:left;
width:380px;
height:100%;
text-align:center;
margin: 0 5px 0 5px;
}
.ca-item-main{
position:absolute;
right:80px;
bottom:5px;
background:#fff;
overflow:hidden;
width: 380px;
-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.ca-nav span{
width:25px;
height:38px;
background:transparent url(https://photos-2.dropbox.com/t/2/AADIMMteRhEB2NiHzX_Z0MquXnxppt4ivpdmarz52rDyOQ/12/226666032/png/32x32/1/_/1/2/arrows.png/EO2pmKoBGH0gAigC/aALpyYLbAaADO2-Ebio68A3s-L7ioYLKSv_9ocokcRY?size=1024x768&size_mode=3) no-repeat top left;
position:absolute;
top:50%;
margin-top:-19px;
left:-40px;
text-indent:-9000px;
opacity:0.7;
cursor:pointer;
z-index:100;
}
.ca-nav span.ca-nav-next{
background-position:top right;
left:auto;
right:-40px;
}
.ca-nav span:hover{
opacity:1.0;
}
/**********Demo.cs*****************/
#import url('reset.css');
/* General Demo Style */
body{
background:#e4ebe9 url(../images/pattern.png) repeat top left;
color:#000;
font-family: 'PT Sans Narrow', Arial, sans-serif;
font-size:12px;
}
a{
color:#000;
text-decoration:none;
}
.clr{
clear:both;
}
h1, h5{
margin:15px;
font-size:44px;
color:#000;
font-family: 'Rochester', sans-serif;
text-shadow:1px 1px 1px #fff;
text-align:center;
}
h1 span, h5{
font-size:20px;
display:block;
color:#60817a;
}
<div class="container">
<div id="ca-container" class="ca-container">
<div class="ca-wrapper">
<div class="ca-item ca-item-1">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://www.dropbox.com/static/images/lockbox.png" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-2">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://www.dropbox.com/static/images/lockbox.png" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
<div class="ca-item ca-item-3">
<div class="ca-item-main">
<div class="wrapper">
<img src="https://www.dropbox.com/static/images/lockbox.png" alt="" />
<div class="overlay">
<h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Am working on making a copy of the BBC site and want to make two horizontal bars (part of the header) butt up against each other. Right now, there is a space between the two which I want to remove.
Here is the image I am getting:
Here is the HTML and CSS:
<!doctype html>
<html>
<head>
<title>BBC_Copy</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;
font-family: arial, helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
.fixedwidth {
width:1050px;
margin:0 auto;
}
#logodiv {
padding-top:5px;
float:left;
border-right:1px solid #770000;
padding-right: 10px;
}
#signindiv {
font-weight: bold;
padding:2px 80px 12px 20px;
font-size: 0.9em;
float:left;
border-right:1px solid #770000;
}
#signindiv img {
position:relative;
top:3px;
}
#topmenudiv {
float:left;
}
#topmenudiv ul {
margin:0;
padding:0;
}
#topmenudiv li {
list-style: none;
font-wieght:bold;
font-size:0.9em;
border-right:1px solid #770000;
height:100%;
padding:10px 20px 12px 20px;
float:left;
}
#searchdiv {
float:left;
padding:5px 0 0 10px;
}
#searchdiv input {
height:25px;
border:none;
font-size:0.9em;
padding-left: 10px;
background-image: url("images/magnify.png");
background-repeat: no-repeat;
background-position:center right;
}
.break {
clear:both;
}
#newsbar {
background-color:#7A0000;
width: 100%;
height:40px;
color:white;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbc_logo.png" />
</div>
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sport</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div>
<div id="searchdiv">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="break">
</div>
<div id="newsbar">
</div>
</div>
</body>
</html>
Your problem is in:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
The <p> tags are adding extra margin on top and bottom. I would recommend getting rid of the p tags... they don't add any semantic advantage.
Replace this:
<div id="signindiv">
<p><img src="images/signin.png" />Sign In</p>
</div>
with this:
<div id="signindiv">
<img src="images/signin.png" />Sign In
</div>
Result: http://jsfiddle.net/ru7zzc1w/1/
i'm doing a project for learning purpose. i have a problem of getting left and right div's inside the main div. if anyone can point me out where is the problem in the code it will be most appreciated. thank you
HTML code
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="template/css/test_css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_wrapper">
<div class="wrapper">
<div class="head"></div>
<div class="nav"></div>
<div id="main">
<div class="left">some data</div>
<div class="right">some data</div>
</div><!--end main-->
<div class="footer">
</div><!--end footer-->
</div><!--end wrapper-->
</div><!--end main_wrapper-->
</body>
</html>
CSS code
#charset "utf-8";
/* CSS Document */
body,td,th {
font-family: Arial, Helvetica, sans-serif;
margin-top:0px;
background-color:#FF0000;
}
#main_wrapper {
width:950px;
margin:auto;
background-image: url(../images/bg_a.png);
background-repeat:repeat-y;
}
.wrapper {
background-color:#009900;
margin-left:5px;
margin-right:5px;
}
.head {
height:115px;
}
.nav {
height:30px;
}
#main {
padding:10px;
margin:5px;
background-color:#0099FF;
}
.left {
width:600px;
float:left;
}
.right {
width:300px;
float:right;
}
.footer {
height:50px;
}
try this:
#main {
padding:10px;
margin:5px;
background-color:#0099FF;
overflow: hidden;
}