CODEWITHSUNDEEP
csshtmlmenu
Suzan Cioc
Suzan Cioc

Reputation: 30137

How to place DIVs from left to right?

Is it possible to style DIVs so they look like follows:

enter image description here

with simple code

<div class='menubar'><div class='menu'>item1<br/>item2</div>...</div>

This is for menu. I wish just to resize selected DIV.

The features should be follows:

1) DIVs are placed from left to right without specifying absolute positions.

2) DIVs are taller than container DIV but don't stretch it

UPDATE

Please explain with DIVs or SPANs, I failed to use LEFT with them. I need to learn, not get ready solution.

Upvotes: 1

Views: 274

Answers (3)

bashleigh
bashleigh

Reputation: 9324

This will depend on what browser you want it to work for. For ie8 and below i suggest not using this code. Inbox me if you'd prefer an all browser version but to ignore ie 5.5, 6, 7 and 8 its best.

First of all for the menu I find it easier to use the unordered list method than a selection of divs and their ID's and classes. Heres a small example.

HTML List

<ul id="menu">
    <li>
        <a href="#">list1</a>
    </li>
    <li>
       <a href="#">List2</a>
       <ul>
           <li>
               <a href="#">Option2</a>
           </li>
       </ul>
</ul>

CSS for the menu: 

body, html {
    padding:0px;
    margin:0px;
    width:100%;
}
body{
    background:#FCFCFC;
}
#menu{
    background:#333333;
    list-style-type:none;
    padding:0px;
    margin:0px;
}
#menu > li {
    padding:0px;
    margin:0px;
    display:inline-block;
}
#menu > li > a {
    color:#FFFFFF;
    text-decoration:none;
    font-size:20px;
    font-weight:bold;
}
#menu > li > ul {
    display:hidden;
    position:absolute;
}
#menu > li:hover > ul{
    display:block;
}

thats the basics anyway. Once you've got that your ready to go!;

Upvotes: 0

Christoph
Christoph

Reputation: 51261

This is pretty basic stuff.

1) don't use divs, use a list 2) float the child element

<ul class='menubar'>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

and the according css:

ul.menubar{
   /*some fancy css*/
   height:<x>px; /* is needed since it would collapse otherwise*/
}
ul.menubar > li{
   float:left;
   /* more fancy css */
}

Here you go with a fancy demo.

Upvotes: 1

nicolast
nicolast

Reputation: 732

set a width to your divs, then use float:left; ? this won't stretch the container

you can also use display:inline-block; (on the divs) and set text-align:center; to the container. But it will stretch the container.

Upvotes: 0

Related Questions