CODEWITHSUNDEEP
htmlcss
user1745334
user1745334

Reputation: 7

converting a div element into inline in css

Hello friends i have a problem in a css i want to convert a div tag into inline 

<div id="menu1">
 <ul>
 <a href="#"> <li>  one</li> </a>
 <a href="#"> <li>  two</li> </a>
 <a href="#"> <li>  three</li> </a>
 <a href="#"> <li> four </li> </a>
 <a href="#"> <li> five</li> </a>
 <a href="#"> <li>six </li> </a>
 <a href="#"> <li> seven </li> </a>
 <a href="#"> <li> eight </li> </a>
 </ul>
 </div>

<div id="menu2">
<ul>
<a href="#"> <li>  one</li> </a>
<a href="#"> <li>  two</li> </a>
<a href="#"> <li>  three</li> </a>
<a href="#"> <li> four </li> </a>
<a href="#"> <li> five</li> </a>
<a href="#"> <li>six </li> </a>
<a href="#"> <li> seven </li> </a>
<a href="#"> <li> eight </li> </a>
</ul>
</div>

now i want that a menu 1 display on,left side and menu 2 display on right side iam using display inline but it is not working

Upvotes: 0

Views: 279

Answers (4)

Bredele
Bredele

Reputation: 115

I think you should displayed your lists in inline-block (with inline-block you keep the initial width).

#menu1, #menu2 {
   display:inline-block;
}

Olivier

Upvotes: 0

David Thomas
David Thomas

Reputation: 253496

I'd suggest:

div {
    width: 48%;
    float: left;
}

JS Fiddle demo.

Or, if your users have a compliant browser, you can set the width to 50%, using box-sizing to contain the padding and border-width within the defined width of the element:

div {
    width: 50%;
    float: left;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

JS Fiddle demo.

Similarly, given compliant browsers, you could instead use the column-count property to define a specific number of columns, into which the browser will fit the content. For this to work I've wrapped your current (hideously invalid) html in another element, with an id of 'wrapper':

#wrapper {
    -moz-column-count: 2;
    -ms-column-count: 2;
    -o-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

JS Fiddle demo.

If you have the option of only requiring Webkit and Opera support, and perhaps your users have enabled flex-box support in their Firefox installation, then using the CSS flex-box model becomes an option, though again requires a wrapping element to contain the two menu elements, with the following CSS:

#wrapper {
    display: -webkit-flex;
    -webkit-flex-direction: row;
    -webkit-flex-wrap: nowrap;
}

#wrapper > div {
    display: -webkit-flex-inline;
    -webkit-flex: 1 1 auto;
}

JS Fiddle demo.

Note: WebKit implementation must be prefixed with -webkit; Gecko implementation is unprefixed but behind a preference (except if you are using Nightly); Internet Explorer implements an old version of the spec, prefixed; Opera 12.10 implements the latest version of the spec, unprefixed.

The invalid mark-up

<div id="menu1">
 <ul>
       <a href="#"> <li>  one</li> </a>
       <a href="#"> <li>  two</li> </a>
       <a href="#"> <li>  three</li> </a>
       <a href="#"> <li> four </li> </a>
       <a href="#"> <li> five</li> </a>
       <a href="#"> <li>six </li> </a>
       <a href="#"> <li> seven </li> </a>
       <a href="#"> <li> eight </li> </a>
    </ul>
</div>

The only valid child element of a ul (or an ol) is an li: no other elements are permitted within a ul or ol unless they're wrapped in an li element. So, to correct your HTML, it should be:

<div id="menu1">
 <ul>
       <li><a href="#">one</a></li>
       <li><a href="#">two</a></li>
       <li><a href="#">three</a></li>
       <li><a href="#">four</a></li>
       <li><a href="#">five</a></li>
       <li><a href="#">six</a></li>
       <li><a href="#">seven</a></li>
       <li><a href="#">eight</a></li>
    </ul>
</div>

If the purpose of wrapping the li with an a was to make the clickable area of the a element fill the li, then simply use a { display: block; }

References:

Upvotes: 2

blo0p3r
blo0p3r

Reputation: 6850

Using the CSS float attribute you can attain what you are looking for.

#menu1 {
    float: left;
}
#menu2 {
    float: left;
}

You can look at this fiddle as an example.

See Also

Upvotes: 0

Antony
Antony

Reputation: 15114

Can you try float: left for the 2 <div>s?

See DEMO.

#menu1, #menu2 {
    float:left;
}

Upvotes: 0

Related Questions