CODEWITHSUNDEEP
htmlcssxhtml
Big L
Big L

Reputation: 1

two divs on each side on the same line

How can I make it stay on the same line? I want "How ya doin?" to be on the same line as the menu.

<div class="header">

<b>How ya doin?</b>

<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Support</a></li>
</ul>

</div>

THe CSS:

* { margin: 0; padding: 0; }

.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
}

ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}

.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}

.menu li {
display: inline;
margin-right: 8px;
}

This is what I get: alt text

Upvotes: 0

Views: 3352

Answers (7)

Olly Hodgson
Olly Hodgson

Reputation: 15785

The ul is a block element, so by default it starts on a new line, taking 100% of the available width. You need to tell it to behave differently.

Easiest should be to set display: inline; on the ul element.

Another is to set float: left; on both the <b> and the <ul>, and give them both a width.

If you take the latter (float) approach, you'll need to tell .header to contain the floats. Easiest way to do that is height: 1%; overflow: hidden;.

Upvotes: 0

Blair Scott
Blair Scott

Reputation: 1885

I changed your CSS to this and it seemed to do the trick (additions noted):

* { margin: 0; padding: 0; }

.header {
background: #CCC;
font-weight: bold;
padding: 5px 5px 3px 16px;
float:left; /* ADDED */
width:100%; /* ADDED */
}
b {
float:left; /* ADDED */
}
ul {
padding-left: 10px;
color: #444;
list-style: none;
margin: 0px 0px 5px 10px;
}

.menu {
font-weight: normal;
background: #CCC;
color: #000;
text-align: right;
}

.menu li {
display: inline;
margin-right: 8px;
}

Upvotes: 0

Anwar Chandra
Anwar Chandra

Reputation: 8648

<div class="header">

<!-- float to left -->
<b style="float: left;">How ya doin?</b>

<!-- float to right, or you can add float to .menu in css -->
<ul style="float: right;" class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Registration</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Support</a></li>
</ul>

<!-- clearing float -->
<br style="clear:both;" />

</div>

Upvotes: 0

Juraj Blahunka
Juraj Blahunka

Reputation: 18533

what about using absolute / relative positions? this is really a simple and nice solution for header text, easy to add another elements as well

.header{
    position: relative;
}

.header > b{
    position: absolute;
    left: 10px;
    top: 5px;
}

.header > ul{
    position: absolute;
    top: 5px;
    right: 10px;
}

Upvotes: 0

svens
svens

Reputation: 11628

Try 

ul {
    display:inline;
    /* ... */
}

Upvotes: 1

Rich Bradshaw
Rich Bradshaw

Reputation: 72985

I'd give the b and the ul both a width, say 50% for making it easy, then float one right and one left.

You'll need a div to clear it afterwards to fix the layout though.

Something like:

.header b {
    width:50%;
    float:left;
}

.header ul {
    width:50%;
    float:right;
}

then underneath

<div style="clear:both"></div>

to avoid messing things up.

Upvotes: 2

Paul
Paul

Reputation: 5576

something like:

.header b{display:block; width: 100px; float:left}

.menu {width:150px; float:left}

Good luck

Upvotes: 0

Related Questions