homepage Welcome to WebmasterWorld Guest from 54.227.141.230
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
DIV Tags side by side boxes
Adampski




msg:4371055
 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




msg:4371096
 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




msg:4371465
 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




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

Bump

penders




msg:4371863
 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




msg:4371974
 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




msg:4372392
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved