Margin-bottom problem[please help]

**l-hcdf** · Sep 25, 2012 10:51

Hello every one, I just joined to this forum

And i have one question:
I just started coding a website but I found problem in header;After I insert 3 buttons and logo to the header I couldn't insert any other element next to the logo(opposite of it)
[I tried clear:both and right and left and I thought I should just use margin bottom but it doesn't work]
Pleas help

And here is m html code:

HTML Code:

<!doctype html>
<html>
<head>
<link href="_CSS/style.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8">
<title>به گیلد رف اف الاینس خوش امدید</title>
<meta name="description" content="One of the best guilds in persian server "jahan games" Is wrath of the alliance"/>
<meta name="keywords" content="Best persian guild, Jahan games, wrath of the alliance, world of warcraft, WOW tips, WOW level up tips"/>

</head>
<body>
<div id="main">
<header> 
	
			<a href="#home" ><img id="home" src="_Images/Button 1.jpg" width="60" height="37" alt="Home"> </a>
					<a href="#about"> <img id="about"src="_Images/Button 2.jpg" width="96" height="36" alt="about"> </a>
	   	<a href="#rules"> <img id="rules"src="_Images/Button 3.jpg" width="130" height="36" alt="Rules"></a>
		<img id="logo" src="_Images/Logo.png" width="353" height="154" alt="Wrath of the alliance logo"></header>

		<input type="text" name="search" id="search">
		<label for="search"></label>
</div>
</body>
</html>

And here is CSS code
/* CSS Document */

Code:

body{
	background-color:#EFEFEF;
	height:1100px
	

}
header{
	background-image: url(../_Images/Header_bg.png);
	height: 240px;
	margin: auto;
	width: 850px;
}
#search {
	float: right;
	margin-bottom: 150px;
}
#logo{
	margin-top: 65px;
	margin-left: 50px;
	clear: right;
	
	
	
}

#main{
	width: 850px;
	margin: auto;
	height: 1100px;
}
#rules {
	float: right;
	margin-right: 10px;
}
#about {
	margin-right: 10px;
	float: right;
}
#home {
	float: right;
	margin-right: 5px;
	clear: right;
}

**l-hcdf** · Sep 25, 2012 12:34

I changed

HTML Code:

<img id="logo" src="_Images/Logo.png" width="353" height="154" alt="Wrath of the alliance logo"></header>

		<input type="text" name="search" id="search">
		<label for="search"></label>

to

HTML Code:

<img id="logo" src="_Images/Logo.png" width="353" height="154" alt="Wrath of the alliance logo">

		<input type="text" name="search" id="search">
		<label for="search"></label>
</header>

But didn't worked

**ralph.m** · Sep 25, 2012 15:42

Hi l-hcdf,

It's not totally clear what the issue is, but the bottom margin here will prevent anything from sitting right next to the logo:

Code:

#search {
float: right;
margin-bottom: 150px;
}

Could you post an image of how you want the header organized?

User Tag List

Thread: Margin-bottom problem[please help]

Thread Tools

Display

Margin-bottom problem[please help]

Bookmarks

Bookmarks

Posting Permissions