DIV Tags side by side boxes

Forum Moderators: not2easy

Message Too Old, No Replies

DIV Tags side by side boxes

Adampski

2:32 pm on Oct 5, 2011 (gmt 0)

Hey there!

I'm having issues using two separate areas without them moving, I've had this issue before and never came up with a solution so decided to put navigation area across the top rather than a box to the side.

I'm terrible at explaining things so I'll just have to provide screenshots!

[i1109.photobucket.com...]

Thats what it looks like without any text, and thats how I wanted to navigation box & content box to stay, without moving up or down.

However, when I type in the navigation box... this happens...

[i1109.photobucket.com...]

I've done research and something mentioned of Hollys hack but now that no longer exists because the issue was in IE6? And someone also said something about "float" element but can't seem to get it right, when I set the content box to "float: right;" it just ends up on the left hand side of the page, which is rather annoying!
Any ideas? Much appreciated!

penders

3:44 pm on Oct 5, 2011 (gmt 0)

...when I set the content box to "float: right;" it just ends up on the left hand side of the page...

?!

I think we need to see the relevant CSS/HTML. Post the relevant bits here.

Adampski

10:20 am on Oct 6, 2011 (gmt 0)

body {
background-color: #CCF4FE;
background-image: url(../images/BG.png);
background-repeat: repeat-y;
background-position: center;
}

.container {
width: 780px;
margin: 0 auto;
}

.logo {
background-image: url(../images/Logo.png);
background-repeat: no-repeat;
width: 780px;
height: 212px;
}

.nav {
background-image: url(../images/nav.png);
width: 240px;
height: 400px;
margin-top: 20px;
margin-left: 10px;
padding: 0px;
}

.content {
background-image: url(../images/nav.png);
width: 500px;
height: 600px;
margin-left: 260px;
}

<!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>1-2-3 Pre-School Playgroup</title>
<link href="Master/Master.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div class="container">

<div class="logo">
</div>

<div class="nav">
<div class="content">
</div>
</div>

</div>

</body>
</html>

Thats exactly what I thought when it happened!

Adampski

11:08 am on Oct 7, 2011 (gmt 0)

Bump

penders

12:25 pm on Oct 7, 2011 (gmt 0)

<div class="nav"> 
<div class="content">  
</div>  
</div>

The fundamental problem is that your 'content' is inside your 'nav' container. Adding content to 'nav' will push the 'content' container down. When you float the 'content' right then it is going to align with the right side of the 'nav' container which is only 240px wide and so is going to extend left from here.

Adampski

4:25 pm on Oct 7, 2011 (gmt 0)

Penders, thank you very much for taking the time to read into my issue and the code I posted! I was going to mention that what you suggested didn't work because originally I altered the "<div class="content"> tag beneath the 'nav' tag, which resulted in this:

[i1109.photobucket.com...]

However, I decided to change it and cut&paste the content tag and place it ABOVE the nav tag, which happily did resolve my issue. Thank you very much.

The reason why I originally placed the content tag within the nav tag was because this situation happened at the very start before I implemented images into the page and this temporally resolved it. From what I now know in hindsight, is that it was holding me back from doing what I was trying to do.

Again, many thanks!

penders

2:23 pm on Oct 9, 2011 (gmt 0)

You're welcome. Just out of interest, you can arrange your markup in whatever order you like (having your content first is likely to be better for SEO), but you are likely to have to adjust your CSS...

<div class="nav">...</div> 
<div class="content">...</div>

In this case, you could float the 'nav' left and allow the 'content' to flow to the right.

<div class="content">...</div> 
<div class="nav">...</div>

In this case you could float the 'content' right and allow the 'nav' to flow to the left. Or, absolutely position the 'nav' on the left (which takes the 'nav' out of the flow of the page) and let the 'content' flow like normal, but give it a large margin-left (which you did in your example above) in order to 'clear' the 'nav'. With the 'nav' absolutely positioned, it wouldn't matter in which order the elements appeared in the markup.