Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Robert Berube
Robert Berube
8,119 Points

Moving Divs around...is it possible with CSS

So, when starting with a mobile site, I have a div that contains a nav that I would prefer to have at the bottom of the page, under the div with the content.

Once the screen reaches a certain width, I want it to be a side nav on the left, with the content on the right.

So I know it is a problem because when starting with the mobile view, the div position in the html is at the bottom, and when the screen is wide, I need it to come up to the top. I know I need to either float it, or position it absolutely.

How do you approach an issue like this when designing layout?

4 Answers

James Gill
James Gill
Courses Plus Student 34,936 Points

Robert Berube In short, yes. The most popular way to do this is with jQuery--you don't need to go into the special hell that is Flexbox.

For example, you can use something like this to manipulate specific divs at specific screen widths:

$(window).on("resize", function() {
    var w = $(this).width();
    if (w < 960) {
        //do less than action
    } else {
        //do else action
    }
});

Using that, you could use jQuery functions like .inserAfter(), etc. to place the menu div in a new location.

Robert Berube
Robert Berube
8,119 Points
Robert Berube
Robert Berube
8,119 Points

Likely good support, or a fall back.

Erwin Meesters
Erwin Meesters
15,088 Points
Erwin Meesters
Erwin Meesters
15,088 Points

The order in which you want to see your divs on a mobile device determines the structure of your html. So when you want your navigation at the bottom, your html has to look something like this:

<body>
  <div class="content">content</div>
  <div class="navigation">navigation</div>
</body>

When these divs are given a with of 100% they appear the way you would expect.

At larger screen sizes you will have to float these elements and give them an appropriate width. For example: the content takes up 75% of the screen width and the nav 25%. By floating them both, the order of the divs in the html structure will determine the position of the divs on screen.

When you float both to the left the content div will float first, appearing on the left. The navigation div will follow on the right of the content div. When you float both to the right the content div will float first, followed by the navigation div appearing on the left.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

What browser support do you think you'll need? Sounds like a prime candidate for flexbox instead.