CODEWITHSUNDEEP
htmlcss
UserX
UserX

Reputation: 1327

Trying to have three <ul> elements in horizontally

Im trying to have 3 columns with lists horizontally with margin-right.

And Im almost get it, but Im having some problem aligning my #col3 at right.

Im trying with float:right, but dont works, but works with float:left, but I guess its not correct because when I do this #info #col3 {width:200px; float:left;} and then give background:color to my #info, my div dont contains what was supposed to. So there is some kind of conflict.

Do you know a correct way to do this??

here is my issue: http://jsfiddle.net/tvj4C/

Here is my code:

html:

<div id="page-content">
  <h1>Title of the post</h1>
  <img src="../image1.jpg" width="700px" height="360px" />
  <div id="info">
    <h2>Info</h2>
    <ul id="col1">
      <li>Adress 1</li>
      <li>Adress 2</li>     
    </ul>
    <ul id="col2">
      <li>Phone 1</li>
      <li>Phone 2</li>   
    </ul>
    <ul id="col3">
      <li>Email 1</li>
      <li>Email 2</li>       
    </ul>
  </div>
  <div id="clear"></div>
  <div id="content">
    <h2>Subtitle of the post</h2>
    <p>Content of the post.</p>
</div>

CSS:

#page-content
{
    float:left;
    width:700px;
    font-size:16px;
}

#page-content h1
{
    font-size:25px;
    font-weight:100;
    margin-bottom:10px;
}

#page-content ul
{
    list-style:none;
}

#page-content ul li
{
   font-size:17px; margin-top:7px; text-decoration:none;
}

#info
{
    margin:10px auto;
    background:yellow;
}

#page-content h2
{
    font-size:22px; color:#444; font-family:'bariol_boldbold';  font-weight:100;
}

#info #col1
{
    float:left;
    width:200px;
    margin-right:50px;
}

#info #col2
{
    float:left;
    width:200px;
    margin-right:50px;
}

#info #col3
{
    width:200px;
}


#info ul li a
{
    text-decoration:none;
    color:#000;
    margin-left:10px;
}


#content
{
    margin-top:5px;
    background-color:red;
}

#content p
{
    font-size:16px;
    line-height:25px;
    text-align:justify;
}

#clear
{
    clear:both;
}

Upvotes: 2

Views: 55

Answers (3)

Mike Sheehan
Mike Sheehan

Reputation: 530

The issue isn't 

float: left vs display: inline-block.

You set

#page-content { width: 700px; }

which is too narrow because your ul's have a default left padding pushing them wider than the 200px you specified.

I updated your original code here: http://jsfiddle.net/97PHv/1/

Upvotes: 0

Ori Price
Ori Price

Reputation: 4201

different solution without inline-block with the use of float:left;

http://jsfiddle.net/tvj4C/2/

Upvotes: 0

Jacek Kowalewski
Jacek Kowalewski

Reputation: 2851

display: inline-block;

I think that no more comment is needed here ;).

http://jsfiddle.net/tvj4C/1/

You should also read about display: table, and display: table-cell. And if you will use display: table, remember about vertical-align property for each table-cell.

BTW: Question is a little bit complicated, so if this answer didn't hit the point, please update question and I will update answer ;).

Upvotes: 3

Related Questions