Floats?

HTML & CSS
1

Since all my <h3>s have a set width and are floated to the right, and the box thing is floated to the right, shouldn’t they be side-by-side?

How do I make them be side-by-side?

http://urgentcareavalon.com/

Thanks

2

Are you sure about those floats?


#inner_wrapper h3 {
    clear: left;      /* clear:left starts each one on a new line */
    color: #4E6C23;
    float: left;
    font-family: "Myriad Pro","Trebuchet MS",sans-serif;
    font-size: 20px;
    font-weight: bold;
    padding: 12px 0 0 13px;
    text-shadow: 2px 2px 1px #CCCCCC;
    text-transform: uppercase;
    width: 400px;
}
3

A couple of problems there … Firstly, the clear: left on your h3s is also clearing the whole div because the h3s inside it are cleared. But by just floating the h3s, they will naturally sit side by side across the page anyway … so you need to wrap them in a div if you want to contain them in a column.

4

Thanks, Ralph. I misunderstood “them”.

5

On a totally different note why are you using all those H3??!?!?

a couple of additional additional points:

  1. clear: (same direction as your float) is causing your H3s ( really reconsider your tag usage here!) to drop. So if you float:left; clear left; you aren’t doing much!
  2. if you wanted the tags floated right you could float:right; HOWEVER this will reverse their order! That is the second on your source code tag will appear to the left of the first, and third to the LEFT of the second, and so forth. So the usual technique is to wrap the tags in a container , float the container right and the tags left ( no clear!)
  3. Since you are going to need a wrapper anyway and it is a list of items why not use a UL? :slight_smile:

hope that helps.