1

Can someone please explain why my articles div appears below my sidebar div?

http://www.api.jonathanlyon.com/getpocket/view.html

You will need to select an item in the dropdown first

Thanks

Jonathan

Jonathan Lyon
  • 3,862
  • 7
  • 39
  • 52
  • you really could of found out why your self. I use firefox and firebug, so I just opened up your page and disabled the css that caused the problem. Easiest debugging, and it's all free – X-27 is done with the network Jan 21 '13 at 15:57

4 Answers4

4

get rid of the float:left on your container and articles divs

X-27 is done with the network
  • 292
  • 7
  • 21
3

Remove the float attribute on the 'container' div and it will work correctly.

[edit] The float attribute on 'bigcontainer' is also unnecessary.

The cause of this issue is probably as follows: floated elements are ignored when computing the dimensions of the enclosing element. You have floated both 'lsidebar' and 'container', so there is nothing left in 'bigcontainer' and its computed width is zero. As a result, when the 'container' element is placed, there is no horizontal space left in the enclosing 'bigcontainer' element, so it is placed below the 'lsidebar' element.

Krzysztof Kosiński
  • 4,225
  • 2
  • 18
  • 23
1

As per my concern the markup should be somthing like this:

<div id="mainWrap">
<div id="sidebar">
</div>
<div id="article">
</div>
</div>

and its styling should be like this 

#mainWrap{
#some basic styling like width 
}
#sidebar{
#some basic styling like width and float:left
}
#article{
#some basic styling like width and float:right
}

Its as per standard markup and css standard.

In your case container is having float:left and which is too large thats why its going down. Remove float:left and it will be fine.

Thank you!

Soarabh
  • 2,910
  • 9
  • 39
  • 57
0

This is because of the <div id="container"> width which is too large. Reduce the width and it will appear just next to your sidebar.

RodolpheChe
  • 599
  • 5
  • 6