Repositioning page layout with CSS

Question

I have a problem where I wish to alter the positioning of webpage using CSS for a mobile view. The current set up for desktop is a sidebar floated to the left and a textbox floated to the right. The HTML is as follows:

<div id="container">
   <div id="sidebar">...</div>
   <div id="textbox">...</div>
</div>

My dilemma is that on mobile devices I wish for the sidebar content to appear under the textbox and I am struggling to produce the CSS to do this. I am using media queries to target smart phones eg:

@media screen and (max-width:479px) {
  /* Target portrait smartphones */
}

Can anyone provide me with the CSS to do this? Thanks in advance.

score 0 · Answer 1 · answered Apr 10 '13 at 22:05

0

It would be easiest to have #sidebar after #textbox in your html, this wont effect desktop viewing, and then for mobile you can just remove the floats:

@media screen and (max-width:479px) {
  #sidebar, #textbox {
    float: none;
  }
}

answered Apr 10 '13 at 22:05

dezman

18,087
10
53
91

score 0 · Accepted Answer · answered Apr 10 '13 at 22:31

It's pretty simple, in order to do that you should use it like this

<div id="container">
   <div id="textbox">...</div>
   <div id="sidebar">...</div>
</div>

The textbox first because you'll remove float for mobile. So the textbox goes first then the sidebar.

The css:

.textbox {
    width: ***px;
    float right;
}
.sidebar {
    width: ***px;
    float left;
}
@media screen and (max-width:479px) {
  /* Target portrait smartphones */
  .textbox, .sidebar {
     float: none;
  }
}

Hope this helps ! :)

Repositioning page layout with CSS

2 Answers2