0

I have this very simple structure :

<div id="header">
  <h1>Title</h1>
</div>
<div id="content">
  <ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>...</li>
  </ul>
  <div id="stuff">
    <p>Other stuff in the content</p>
  </div>
</div>
<div id="menu">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>...</li>
  </ul>
</div>

And I wanted to have this behavior with only one stylesheet : When the browser resolution is big, I want to display the #menu on the right of the #content. When it is not, it can go below. So I tried this :

#content
{
  float:left;
  width:70%;
}
#menu
{
  width:300px;
  float:left;
}

and it quite works, but on the iPhone, the #content is too large, and there's plenty of white space on the left. I'd really like the screen to fit as much as possible to the #content (the #stuff is not very large).

Any of you CSS ninjas knows how to do this ?

Thanks a lot.

Julien

Julien
  • 9,312
  • 10
  • 63
  • 86

1 Answers1

2

Read how to make a better layout for mobile devices (especially for iPhone!):
https://www.w3schools.com/css/css_rwd_viewport.asp

On this site they explain the viewport property for handheld devices... so you set the width of the viewport and so it will be a lot easier to make your design work properly on iPhone.

Greg Glockner
  • 5,433
  • 2
  • 20
  • 23
thedom
  • 2,498
  • 20
  • 26
  • Cool, I wasn't aware of this viewport property. I check this, and mark if it works. Edit: works perfectly! Thanks. – Julien Dec 10 '10 at 09:55
  • The above site no longer available. Since you didn't reproduce their code ideas in the answer, this is no longer an answer. -1 – crashwap Jan 09 '15 at 20:35