4 replies [Last post]
Turbonium
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2004-04-04
Posts: 5
Points: 0

CLICK HERE for the page being disussed.

The menu bar at the top consists of two <div> blocks, and the css code I used to align them was given to me from another forum. I don't really know how the css alignment used really works though (very vaguely). btw the css code is as follows, along with the HTML...

HTML:

<div id="menuLeft">&nbsp;link 1&nbsp;&nbsp;|&nbsp;&nbsp;link 2</div>
<div id="menuRight">link 3</div>

CSS:

#menuLeft {
background-color: orange;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: white;
width: 380px;
padding: 2px;
font-size: 12px;
text-align: left;
right: 50%;
position: absolute;
}

#menuRight {
background-color: orange;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: white;
width: 380px;
padding: 2px;
font-size: 12px;
text-align: right;
left: 190px;
position: relative;
}

The problem lies when you resize the window. Try resizing down until you see the menu blocks shift. Keep dragging the window smaller until you see them split apart entirely... What is causing this? What am I doing wrong?

LaLindsey
LaLindsey's picture
Offline
Regular
NY
Last seen: 11 years 43 weeks ago
NY
Timezone: GMT-4
Joined: 2003-12-16
Posts: 14
Points: 0

&lt;div&gt; problems

position:relative

and

right:50%;

are prolly the problem. They are what always give me headaches. Why not just instead of positioning one, float it?

----------------------------------
Lindsey

CSSgirl Designs

Turbonium
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2004-04-04
Posts: 5
Points: 0

&lt;div&gt; problems

LaLindsey wrote:
position:relative

and

right:50%;

are prolly the problem. They are what always give me headaches. Why not just instead of positioning one, float it?

Give me sample code on how to float so I know what you're talking about. Two lines is all...

co2
co2's picture
Offline
Leader
UK
Last seen: 12 years 16 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

&lt;div&gt; problems

You'd have to either stop using the left menu as absolute positioning (because this takes its div out of the flow of the code), which means a floated element will have no effect upon it, or contain the right menu div within the left menu div for the float to work. Either way, your right menu div would have:

float: right;

...within its CSS code. Also, any element that comes after it (such as another div) should have:

clear: right;

... as so it doesn't get affected by the floated element.

Finally, ditch the right menus relative positioning.

The next sentence is true. The previous sentence is false. Discuss...

Turbonium
Offline
newbie
Last seen: 16 years 18 weeks ago
Joined: 2004-04-04
Posts: 5
Points: 0

&lt;div&gt; problems

Ok people, I have another test page here.

I used the following css to come up with a solution to both my menu, as well as another problem I had which was figuring out how to make two column content things... You can obviously view the source of the page for the HTML. Here is the pertaining block of css...

------------

#testMenuContainer {
width: 760px;
position: relative;
text-align: left;
}

#menuLeft {
background-color: #BCD2D1;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: white;
width: 660px;
padding: 2px;
font-size: 12px;
text-align: left;
}

#menuRight {
background-color: #BCD2D1;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: white;
width: 100px;
padding: 2px;
font-size: 12px;
text-align: right;
left: 660px;
position: absolute;
}

#testContentContainer {
width: 760px;
position: relative;
text-align: left;
}

testDivLeft {
background-color: #849A9C;
width: 500px;
height: 200px;
}

#testDivRight {
background-color: red;
width: 260px;
height: 200px;
top:0px;
left:500px;
position: absolute;
}

------------

The problem now lies with the two content-columns (olive and red) that I created. Look here, and you can see that the second column just keeps on going, spilling out of the containing div simply by me making the height of it significantly greater than the left column div. However, no matter how large of a height I make the left column div, the containing div increases in size to compensate for it. How can I fix this? Something to do with static vs. absolute positioning no doubt...

btw Here is what I mean by making the right column bigger in height than the left...

testDivLeft {
background-color: #849A9C;
width: 500px;
height: 200px;
}

#testDivRight {
background-color: red;
width: 260px;
height: 400px;
top:0px;
left:500px;
position: absolute;
}

If I confused you, just ask me to rephrase.