how do i get 3 divs side by side?
left div: would be on the far left with no image no text.
middle div: i would like for it to take up the middle of the page which would have equal space on both sides.
right div would have a small badge icon which would always be on far right of the page.
please help
<html>
<head>
<style>
.lol { float:left; width:50px; margin-right:10px; background-color:Purple; }
</style>
</head>
<body>
<div>
<div class="lol">
hi
</div>
<div class="lol">
hi2
</div>
<div class="lol">
hi3
</div>
</div>
</body>
</html>
thanks, but when i apply a i tried it but the center div is not in the middle.
here is what i’m trying to do graphically.
the center div would have an image in place that would always be centered.
thanks
but am i suppose to add that to the wrapper/container div? if so then it didnt work.
No need to use display: inline. Just float block elements.
Looks to me like you don’t actually need 3 child divs, just 2.
<html>
<head>
<style>
.wrap { width: 970px; margin: 0 auto; overflow: hidden; }
.right { width: 200px; float: right; background: #f00; }
.middle { width: 570px; float: right; background: #000; }
</style>
</head>
<body>
<div class="wrap">
<div class="right">
right content
</div>
<div class="middle">
middle content
</div>
</div>
</body>
</html>
|
No need to use display: inline. Just float block elements.
Looks to me like you don’t actually need 3 child divs, just 2. <html>
<head>
<style>
.wrap { width: 970px; margin: 0 auto; overflow: hidden; }
.right { width: 200px; float: right; background: #f00; }
.middle { width: 570px; float: right; background: #000; }
</style>
</head>
<body>
<div class="wrap">
<div class="right">
right content
</div>
<div class="middle">
middle content
</div>
</div>
</body>
</html>
|
thanks, i do appreciate your help.
it didnt work at first but after modifying what you posted i was sort of able to achieve the look i wanted with this:
<html>
<head>
<style>
body {margin:0;}
.wrap { width: 100%; margin: 0 auto; overflow: hidden; }
.right { width: 260px; float: right; background: #f00; }
.middle { width: 1000px; margin-left:auto; margin-right:auto; background: #000; }
</style>
</head>
<body>
<div class="wrap">
<div class="right">
<img src="images/coming_soon.png" />
</div>
<div class="middle">
<img src="images/logo.png" />
</div>
</div>
</body>
</html>
however, when i re-size the browser window it cause the middle div to move beneath the right div.
any reason why it’s doing that?
would z-index help in a situation like this?