This is basically the site http://funkz.nfshost.com/
The bottom post with <div id="big-post"></div> element is floated to the left,
and the sidebar with <aside id="tab-lists"></aside> element is floated to the right,
but when i add another(or more) <div id="big-post"> element after the first one it moves the whole sidebar down with the post...
I've tried clearing, but nothing helped...I'm pretty sure the solution is simple, can someone help me?
4 Answers
<div class="some_new_div">
<div id="big-post">...</div>
<div id="big-post">...</div>
<div id="big-post">...</div>
</div>
<aside id="tab-lists"></aside>
CSS
.some_new_div{float: left;}
Remove float from big-post and then take a new element, inside that- put big-post element
Comments
Right-floated elements have to be placed before other elements, so you have to do something like this:
....
<aside id="tab-lists"></aside>
<div id="big-post"></div>
<div id="big-post"></div>
....
1 Comment
user1565092
Thanks for the quick response, that was the first thing i tried, but when I do it this way, when I duplicate the sidebar the big-post is being pushed down. :(
Your <aside id="tab-lists"></aside> element needs to occur before any of the<div id="big-post"> elements.
I've just moved it above the post div in chrome developer tools and could add another post successfully.
2 Comments
user1565092
Yes, but when I add another
<aside> it pushes the down the <div id="big-post">
greg84
Oh ok, sorry. Thought you were just having the one aside. See Chandrakant's answer.
right goes over left in this case, your aside needs to be moved up in the chain, in this case above the big-post.
idtag, so the id must be unique. If you have more the one big-post element you must useclass