CODEWITHSUNDEEP
csshtml
FlyingCat
FlyingCat

Reputation: 14250

Weird image element and css issue.

I have a quick question regarding the img tag. I have a html markup like the following

<header>
   <img src='test.jpg'/>
   <ul>
      <li> item1 1</li>
      <li> item1 2</li>
      <li> item1 3</li>
      <li> item1 4</li>
   </ul>
</header>

I want my image display on the left side of the header and the ul link on the right hand side of the header so both of them will be horizontally align.

Desired result

image                                           items 1 items 2 item 3 item4
other stuff….

It works in FF but not chrome. Chrome is like
image                                           
other stuffs….                                 items 1 items 2 item 3 item4

It treats image as a block element.

My css 

* {
  margin: 0;
  padding: 0;
}

header {
    margin: .2em;
}

header ul {
    float: right;
}

header li {
  list-style: none;
  font: bold .8em arial;
  float: left;
  margin: .3em;
  padding: 1.3em; 
   background-color: #3D3D3D;
}

Can anyone help me about this weird issue? Thanks a lot!

Upvotes: 0

Views: 67

Answers (3)

rink.attendant.6
rink.attendant.6

Reputation: 46208

Chrome is actually doing it right. Floated elements are removed from the layout flow, so the image comes first, then the list starts on a new line, which gets floated right. Other things flow to the left of the list as necessary.

To achieve your desired result, put the floated elements first in the markup:

<header>
   <ul>
      <li> item1 1</li>
      <li> item1 2</li>
      <li> item1 3</li>
      <li> item1 4</li>
   </ul>
   <img src='test.jpg'>
</header>

The list will be removed from layout flow first, so that subsequent elements will flow around it until cleared.

Upvotes: 1

Dennis Meissner
Dennis Meissner

Reputation: 451

I put your code into a jsfiddle:

http://jsfiddle.net/eVDQL/

For me it looks like it is working as explained.

Maybe you can give some more information about what is not working.

To Add an answer to your question i added another working verison into this jsfiddle:

http://jsfiddle.net/eVDQL/1/

Maybe you were just missing to clear the float. If you do not have any following block containers in your markup use a

<br /> and add clear:right;

to your css selector on br

Upvotes: 1

Chad
Chad

Reputation: 490

Group your image and other stuff into a div set at 50% width floated left. Set up your UL in another div and set to 50% and float left as well. It should work just fine.

Upvotes: 1

Related Questions