Home/ Questions/Q 7621627
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T04:14:34+00:00

Spend last night (until early morning) hours on fixing this layout issues. I read

  • 0

Spend last night (until early morning) hours on fixing this layout issues. I read tons of css3 tips and tricks, but i can’t find that what helps me solve this.

See My Fiddle:
http://jsfiddle.net/aWsmb

Bottom, line: there is a NAV that needs to be on the left, and a SUBCONTENT that needs to be on the right (classic). For some reason the SUBCONTENT doesn’t want to play and be nice. It either ‘shoots’ behind the NAV or it sits just next to it, but then it doesn’t use all of the width available and overlaps the footer. See fiddle.

This is what i look for:

---------------------------------
| header                        |
---------------------------------
| main nav                      |
---------------------------------
| main section                  |
---------------------------------
| NAV | SUBCONTENT (full-widh)  |
|     |                         |
---------------------------------
| footer                        |
---------------------------------

Then two additional questions:

<div id='subnav'> = better to ASIDE for this?
<div id='association'> = better to use ARTICLE here?
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Instead of floating the association div left, you could just take off the float and give it a margin-left the size of the side nav + whatever padding you want. EG: http://jsfiddle.net/aWsmb/15/. That way it’ll also fill out it’s parent container. Otherwise, if you do use a float, use overflow: auto on the parent to ensure the children fill it out.

    And yeah if you want to be semantic, use aside for the subnav. I wouldn’t worry too much about it though – it’s nice to have semantic layouts, but it’s not the worst thing you could do :p

    • 0