Div tags next to each other? [Archive]

View Full Version : Div tags next to each other?

Hunter

May 22nd, 2009, 04:10 PM

Bacon, I am using div tags to align my website up now because the gap will not go in between the table feilds. I have tryed everything.

Everything is goiong well, but I cannot seem to get 3 div tags to line up side by side...

The div tag on the left contains a background image which ends the nav bar, then there is the middle nav bar image, then the other end.

<!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>Martyn Lee Ball</title>
<style type="text/css">

</style></head>
<body>
<div id="banner"></div>
<div id="navbar_right"></div>
<div id="navbar_middle"></div>
<div id="navbar_left" ></div>
<div id="middle_section">dsadasd</div>
</body>
</html>

klange

May 22nd, 2009, 04:13 PM

float: left;

Then put them all of them in one <div> to keep them together.

.menu_item {
float: left;
}
...
<div class="menu_bar">
<div class="menu_item">Item A</div>
<div class="menu_item">Item B</div>
<div class="menu_item">Item C</div>
</div>

Hunter

May 22nd, 2009, 06:41 PM

http://i58.photobucket.com/albums/g268/martynball/notabs_website.jpg

Now nothing shows :S

<!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>Martyn Lee Ball</title>
<style type="text/css">
<!--
body {
background-color: #0a2b3e;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-position:center;
}
#banner {
background-image:url(images/banner.png);
height:65px;
width:401px;
margin:30px;
margin-left:auto;
margin-right:auto;
}
#navbar_left {
background-image:url(images/top_bar_left.gif);
height:64px;
float:left;
}
#navbar_middle {
background-image:url(images/top_bar_middle.gif);
height:64px;
float:left;
}
#navbar_right {
background-image:url(images/top_bar_right.gif);
height:64px;
float:left;
}
#middle_section {
text-align:center;
background-image:url(images/middle_background.jpg);
height:184px;
width:100%;
position:absolute;
left:0px;
z-index:0;
}
#navbar {
width:inherit;
height:auto;
}
</style>
</head>
<body>
<div id="banner"></div>
<div id="navbar">
<div id="navbar_right"></div>
<div id="navbar_middle"></div>
<div id="navbar_left"></div>
</div>
<div id="middle_section">dsadasd</div>
</body>
</html>

klange

May 22nd, 2009, 06:45 PM

Your navbars are empty and have no width... Set the width in the CSS.

sdavis117

May 22nd, 2009, 06:53 PM

You should also try an External CSS file instead of using Internal CSS. I find that it helps me spot mistakes much easier. Plus the whole "applying the same themes on all your pages" thing is good too.

Hunter

May 22nd, 2009, 06:53 PM

#navbar_left {
background-image:url(images/top_bar_left.gif);
height:64px;
float:left;
width:50px;
}
#navbar_middle {
background-image:url(images/top_bar_middle.gif);
height:64px;
float:left;
width:50px;
}
#navbar_right {
background-image:url(images/top_bar_right.gif);
height:64px;
float:left;
width:50px;
}
#middle_section {
text-align:center;
background-image:url(images/middle_background.jpg);
height:184px;
width:100%;
position:absolute;
left:0px;
z-index:0;
}
#navbar {
width:inherit;
height:auto;
}
........

<div id="banner"></div>
<div id="navbar">
<div id="navbar_right"></div>
<div id="navbar_middle">Menu 1 | Menu 2 | Menu 3 | Menu 4</div>
<div id="navbar_left"></div>
</div>

Still looks the same :/

sdavis117

May 22nd, 2009, 06:55 PM

Try using a <san> (I think that's right, it might just be <sn>, I haven't used one in quite awhile) in place of your "Navbar" <div>.

klange

May 22nd, 2009, 06:58 PM

The width isn't necessary with content, actually.
I copied your first chunk of code into a new file and plopped an A B and C into the three navbar <divs> and I see them fine, granted, they'll be at the same height as the content because it needs to clear: left; (But then again, with half of your formatting, that isn't going to be enough)

@ sdavis: You mean a <span>? You lose a number of important formatting options with a span.

sdavis117

May 22nd, 2009, 07:01 PM

@ sdavis: You mean a <span>? You lose a number of important formatting options with a span.

Ah yes, now I remember. That would also explain why I always avoid using <span>. I always thought it was just habit.

Hunter

May 22nd, 2009, 07:03 PM

Eh, they are behind that big grey part going accross the screen.

#middle_section {
text-align:center;
background-image:url(images/middle_background.jpg);
height:184px;
width:100%;
position:absolute;
left:0px;
}
#navbar

How do I make that part go below the top 3 divs?

klange

May 22nd, 2009, 07:09 PM

You can change their z-index's, but there are far better ways to achieve the effect you're going for...

Hunter

May 22nd, 2009, 07:22 PM

Could you name some? The end resault shoudl look somthing like this:
http://i58.photobucket.com/albums/g268/martynball/website_edumicro.png

Aspired by edumircro (http://edumicro.deviantart.com/)

klange

May 22nd, 2009, 07:26 PM

For one, you could put everything in the gray box in a <div> with a set height and give it that background image - I don't know why you're messing with z-orders. Provide me with some raw image files and I could work something up myself, I have nothing to do for the next hour or so.

Hunter

May 22nd, 2009, 07:28 PM

Give me 5 to split the image files up as that is one psd at the moment, I have most parts seperate though.

And cheers. :)

Hunter

May 22nd, 2009, 07:35 PM

Here (http://files.filefront.com/imagesrar/;13793937;/fileinfo.html)

Thanks bacon. :)

klange

May 22nd, 2009, 07:55 PM

<!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>Martyn Lee Ball</title>
<style type="text/css">
body {
background-color: #0a2b3e;
background-image: url(images/background.jpg);
background-repeat: no-repeat;
background-position:center;
padding: 0px;
margin: 0px;
}
#banner {
background-image:url(images/banner.png);
height:65px;
width:401px;
margin:30px;
margin-left:auto;
margin-right:auto;
}
#navbar_left {
background-image: url(images/top_bar_left.gif);
height: 64px;
width: 19px;
float: left;
}
#navbar_middle {
background-image:url(images/top_bar_middle.gif);
height: 64px;
width: 362px;
float:left;
}
#navbar_middle_content {
text-align: center;
padding-top: 10px;
width: 100%;
}
#navbar_right {
background-image:url(images/top_bar_right.gif);
height:64px;
width: 19px;
float:left;
}
#bottombar_left {
background-image: url(images/bottom_bar_left.gif);
height: 64px;
width: 19px;
float: left;
}
#bottombar_middle {
background-image:url(images/bottom_bar_middle.gif);
height:64px;
width: 362px;
float:left;
}
#bottombar_right {
background-image:url(images/bottom_bar_right.gif);
height:64px;
width: 19px;
float:left;
}
#middle_section {
background-image:url(images/middle_background.jpg);
height:184px;
width:100%;
left:0px;
margin: 0px;
overflow: hidden;
}
#middle_section_content {
padding: 4px;
text-align: center;
width: 100%;
}
#navbar {
height: 64px;
width: 400px;
margin-left: auto;
margin-right: auto;
}
#bottombar {
height: 64px;
width: 400px;
margin-left: auto;
margin-right: auto;
}
#bottom {
position: absolute;
bottom: 0px;
height: 136px;
width: 100%;
background-image: url(images/bottom_info.jpg);
background-position: 50% 0;
}
</style>
</head>
<body>
<div id="banner"> </div>
<div id="navbar">
<div id="navbar_left"> </div>
<div id="navbar_middle"><div id="navbar_middle_content">Blah blah blah</div></div>
<div id="navbar_right"> </div>
</div>
<div id="middle_section">
<div id="middle_section_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dignissim augue id dolor hendrerit facilisis. Suspendisse pretium feugiat est, et facilisis sem gravida volutpat. Cras convallis vehicula velit et faucibus. Cras egestas, turpis nec imperdiet pretium, dui sem dignissim urna, quis facilisis lacus massa eget turpis. Sed a felis at mauris ultrices cursus et in elit. Integer id felis nec libero ullamcorper mollis. Integer condimentum erat a sapien semper sed tempor lacus feugiat. Ut posuere feugiat quam, ut pulvinar lacus congue quis. Donec vestibulum odio volutpat nibh eleifend facilisis. Cras eleifend semper dolor sit amet pretium. Morbi semper justo ac nisi lacinia auctor. Sed et tempus eros. Aenean dapibus, metus quis lacinia volutpat, leo massa accumsan felis, vitae posuere eros mi sed felis. Fusce lacinia eros nec ante feugiat vel dapibus augue fringilla. Phasellus venenatis felis turpis, blandit accumsan est. Nam dictum hendrerit dapibus. Phasellus a facilisis lacus.
</div>
</div>
<div id="bottombar">
<div id="bottombar_left"> </div>
<div id="bottombar_middle"> </div>
<div id="bottombar_right"> </div>
</div>
<div id="bottom"></div>
</body>
</html>http://blog.phpwnage.com/gallery.php?do=img&type=thumb&i=9 (http://blog.phpwnage.com/gallery.php?do=img&i=9)

Might want to export some of those layers as PNGs.