Проблем с позициониране на Div

[ystefanov]

Как да направя така, че единия ми Div- "Logo", да се позиционира до другия, т.е. от дясно на Div-"Menu"?

Ето и кода:

Style.css

.menu
{
height: 50px;
width: 500px;
background: green;
padding-left: 10px;
padding-top: 5px;

}

div.menu a
{
background: blue;
color: white;
border: 1px solid black;
border-left: none;
float: left;
width: 100px;
text-align: center;
}

div.menu a:hover
{
background: white;
color: #000000;
font-style: italic;

}

.logo
{
background:black;
width: 200px;
height: 30px;
color: #ffff;
text-align: center;
}

div.logo a:hover
{
background: white;
color: #000000;
font-style: italic;
}

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Proba</title>
<link rel="stylesheet" type="text/css" href="style.css">


</head>

<body>
<div class="menu">
<a href="#">ljkljkl 1</a>
<a href="#">ljkljkl 2</a>
<a href="#">ljkljk 3</a>
<a href="#">ljkljk 4 </a>

</div>

<div class="logo">
<a href="#">hgfh</a></div>

</body>
</html>

 

[emagi]

.menu
{
height: 50px;
width: 500px;
background: green;
padding-left: 10px;
padding-top: 5px;
float:left;
}

div.menu a
{
background: blue;
color: white;
border: 1px solid black;
border-left: none;
float: left;
width: 100px;
text-align: center;
}

div.menu a:hover
{
background: white;
color: #000000;
font-style: italic;

}

.logo
{
background:black;
width: 200px;
height: 30px;
color: #ffff;
text-align: center;
float:left;
}

div.logo a:hover
{
background: white;
color: #000000;
font-style: italic;
}

 

[shterev]

.menu
{
height: 50px;
width: 500px;
background: green;
padding-left: 10px;
padding-top: 5px;
float:left;

}

.logo
{
background:black;
width: 200px;
height: 30px;
color: #ffff;
text-align: center;
float:left;
}

</head>

<body>
<div class="menu">
<a href="#">ljkljkl 1</a>
<a href="#">ljkljkl 2</a>
<a href="#">ljkljk 3</a>
<a href="#">ljkljk 4 </a>

</div>

<div class="logo">
<a href="#">hgfh</a></div>
<div style="clear:both;"></div>

</body>

Това в хтмл-а е да не се чупи сайта надолу.

 

[DeathGuard_]

CSS:

.menu
{
height: 50px;
width: 500px;
background: green;
padding-left: 10px;
padding-top: 5px;

}

div.menu a
{
background: blue;
color: white;
border: 1px solid black;
border-left: none;
float: left;
width: 100px;
text-align: center;
}

div.menu a:hover
{
background: white;
color: #000000;
font-style: italic;

}

.logo
{
background:black;
width: 200px;
float: right;
height: 30px;
color: #ffff;
text-align: center;
}

.div1 
{
padding-right: 548px;
}

div.logo a:hover
{
background: white;
color: #000000;
font-style: italic;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Proba</title>
<link rel="stylesheet" type="text/css" href="style.css">


</head>

<body>
<table align="left" valign="top" width="100%">
<tr>
<td valign="top" align="left">

<div class="div1">
<div class="logo">
<a href="#">hgfh</a></div>
</div>
<div class="menu">
<a href="#">ljkljkl 1</a>
<a href="#">ljkljkl 2</a>
<a href="#">ljkljk 3</a>
<a href="#">ljkljk 4 </a>

</div>


</td></tr></table>
</body>
</html>