Weird image element and css issue.

Question

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!

Your code will work unless you don't have enough space to fit the image and the list on the same line jsfiddle.net/fnuyw — omma2289
– omma2289, Commented Aug 16, 2013 at 17:55
This works for me. Can you make a jsfiddle with more html that shows the problem or list your chrome version/os if you aren't using the 'stable' build? There might be an earlier element occupying the space your images want to be in. — Sumurai8
– Sumurai8, Commented Aug 16, 2013 at 17:55

rink.attendant.6 · Accepted Answer · 2013-08-16 17:55:42Z

1

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.

answered Aug 16, 2013 at 17:55

rink.attendant.6

46.7k64 gold badges111 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chad · Accepted Answer · 2013-08-16 17:50:42Z

1

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.

answered Aug 16, 2013 at 17:50

Chad

4905 silver badges14 bronze badges

Comments

Dennis Meissner · Accepted Answer · 2013-08-16 17:52:39Z

1

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

answered Aug 16, 2013 at 17:52

Dennis Meissner

4513 silver badges10 bronze badges

Collectives™ on Stack Overflow

Weird image element and css issue.

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related