CODEWITHSUNDEEP
csshtmlpositioning
DoobyScooby
DoobyScooby

Reputation: 377

HTML/CSS: Position link elements in a Div inside another Div

Sorry for the weird/confusing topic! I'm playing around and trying to make a simple menubar. And I want my page to be inside a wrapper-div. But my menubar changes style and looks really dumb when I change position from absolute to something else.

Here's what it looks like: http://jsfiddle.net/2rEkh/

I want it to look like: http://jsfiddle.net/rNmsP/

But I cant use position:absolute; cause then it wont stay inside my warpper-div. And using relative or any other makes it looks ugly.

Any pointers to what I need to do to make it look like the 2nd link, without using absolute?

Thanks in advance.

Upvotes: 1

Views: 3468

Answers (5)

Francois
Francois

Reputation: 10631

try this?

http://jsfiddle.net/rNmsP/1/

#wd-navbar li a{
display: block;
background-color: #25BAFA;
border-radius: .3em;
padding: .5em;
text-decoration: none;
color: white;
width:25px;
height:20px;
}

#wd-navbar li ul{
display: none;
position: relative;
top: 0px;
padding: 0;
}

edit:

add this also for the navbar height

#wd-navbar{
top 0;
left: 0;
width: 100%;
background-color: #25BAFA;
border-bottom: 2px solid #ccc;
background: #25BAFA;
color: #000000;
height:40px;
}

Upvotes: 1

lvil
lvil

Reputation: 4326

try to play with this: 

#wd-navbar{ 
...   
float:right;   
...  
 }

Upvotes: 1

Lupus
Lupus

Reputation: 1518

try this; check it out

the floating wd-navbar's container must be overflow hidden. else the container element would collepses

#wrapper {
  margin: 0 auto;
  text-align: left;
  margin-bottom: 5px;
}

#wd-navbar{
background-color: #25BAFA;
border-bottom: 2px solid #ccc;
background: #25BAFA;color: #000000;overflow:hidden;}

Upvotes: 2

Andres I Perez
Andres I Perez

Reputation: 75379

Your navbar is not wrapping your floated elements correctly. Just add display: inline-block; to your #wd-navbar and it should play nice.

Upvotes: 1

Fred
Fred

Reputation: 232

Try adding some height to the navbar div: #wd-navbar { height: 40px; }

That should give you the desired look (without getting rid of position:absolute)...

Upvotes: 2

Related Questions