Question

I have a page that has CSS media queries in it, and I was requested to do this:

Mobile layout:

Desktop layout:

Now, the HTML code is placed like this:

<div id="content">
  <h1>the title</h1>
  <p>this is the tagline of the site</p>
  <ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
  </ul>
</div>

I’m having quite a problem trying to achieve the desktop layout. I tried wrapping <h1> and <p> in a <div> and style it with float: left, but it didn’t look as requested (the tagline is wider). I also tried with position: absolute for the <ul>, but also didn’t look as requested (make the #content wider is not an option).

Do you have any suggestions to achieve this without using javascript?

Update:

I’ve uploaded the code to my Koding so you can see what I’m actually doing. This is the CSS. I’m also using normalize.css.

The problem I’m having now is what do the different browsers show:

I think the problem might be in how do the browsers calculate the tagline’s width, but as you can try with the code, if you make the tagline’s text shorter, it looks more like Opera’s rendering.

Have I stumbled with a bug or am I making some mistake in my CSS?

Answer 1

Use float: left in the <h1> and in the <p>. Not in the <ul>.
After that, set the <p> width to 100% and set a top-margin to the <ul>.

To get all the <li> side by side you set them to display: inline.