pixelNation - Displaying inline (3 DIVs)

July 29, 2009, 01:22:36 AM

tog

LemonHead
Posts: 120
Respect: -10

Ok, so I've got 3 DIVs trying to display next to each other. It's a navigation bar, and I want round edges, and the nav to be expandable. So far, I can get 2/3 to display next to each other, the left rounded edge, and the main bar, but the right is on the right on the next line. Here's the HTML:

Code:

And the CSS:

Code:

#container {
margin-left:auto;
margin-right:auto;
width:70%;
}
#logo {
margin-top:10px;
margin-left:10px;
}
#nav {
height:32px;
margin-top:10px;
width:100%;
}
#nav_c {
background-image:url(images/nav.png);
background-repeat:repeat-x;
height:32px;
margin-left:8px;
margin-right:8px;
width:100%;
}
#nav_l {
background-image:url(images/nav_l.png);
background-repeat:no-repeat;
display:inline;
float:left;
height:32px;
width:8px;
}
#nav_r {
background-image:url(images/nav_r.png);
background-repeat:no-repeat;
display:inline;
float:right;
height:32px;
width:8px;
}

Help is appreciated.

July 29, 2009, 02:01:35 AM

Chris

I hack stuff.
Posts: 2330
Respect: -12

lol@all your crazy CSS for such a simple layout

Give nav_l, nav_c, and nav_r a width of 33% each and float them all left, that's all you need to do Tongue

July 29, 2009, 02:07:32 AM

tog

LemonHead
Posts: 120
Respect: -10

They're not all the same width though.

July 29, 2009, 02:35:57 AM

Chris

I hack stuff.
Posts: 2330
Respect: -12

Quote from: tog on July 29, 2009, 02:01:35 AM

They're not all the same width though.

So change the width accordingly, just keep it under 100%.

July 29, 2009, 02:41:45 AM

tog

LemonHead
Posts: 120
Respect: -10

Still doesn't work.

July 29, 2009, 02:51:39 AM

tog

LemonHead
Posts: 120
Respect: -10

Nevermind, I can just make it fixed instead of liquid.

July 29, 2009, 03:03:38 AM

Chris

I hack stuff.
Posts: 2330
Respect: -12

3divs.html

You're doing something wrong.

July 29, 2009, 03:08:59 AM

tog

LemonHead
Posts: 120
Respect: -10

Probably, but it's working cross browser with the fixed width, I'll stick to that. Thanks for the help.

July 29, 2009, 03:12:26 AM

Chris

I hack stuff.
Posts: 2330
Respect: -12

Quote from: tog on July 29, 2009, 03:03:38 AM

Probably, but it's working cross browser with the fixed width, I'll stick to that. Thanks for the help.

The same thing would apply to fixed width, I just used percentage because it would fill up the whole page. The problems you were running into were probably because you were floating things different directions.

#10

tog

LemonHead
Posts: 120
Respect: -10

Yeah, ok thanks Chris, I realized that the nav + container both having width attributes must've been the cause, removing 100% from #nav seemed to fix it. Thanks again.