Content in div gets pushed down

Question

I have a two column solution on my (WP)site, and two make it work when shrinking the browsers width I applied this solution.

It works fine except that the content in the main container gets pushed down. If I float:left both of the containers instead this doesn't happen, but I need a solution like this to make the right container fill the width.

I tried to set the right container to position:relative and the title (h3 tag) in the right container to position:absolute. This pushed the content up to the top but generates other problems.

Why is this happening and how to solve it?

______________________________
||     ||                   ||
|| SB  ||                   ||
||     ||                   ||
||     ||                   ||
||     || Title             ||
||     || Foo text          ||
||     ||                   ||
||     ||                   ||
------------------------------

html:

<div id="main">
    <div id="sub-menu">
        //content
    </div>
    <div id="post-24" class="post post-add">
        //content
    </div>
</div>

css:

#main {
    padding-left: 5px;
    margin-left: 22px;
    margin-top: 28px;
    padding-right: 30px;
    height: 100%;
}

#sub-menu {
    float: left;
    padding: 20px 30px;
    width: 220px;
    height: 400px;
    margin-right: 30px;
    border-radius: 3px;
}

.post {
    padding: 28px;
    padding-bottom: 5px;
    min-height: 400px;
    margin-left: 320px;
}

The code you've posted doesn't illustrate the problem: http://jsfiddle.net/j08691/49K8C/ — j08691, Mar 25 '14 at 13:23
you not added a width to `.post` so this will be 100% which is why it will be "pushed down" until you float it left then the width will be set to be as wide as it's content — Pete, Mar 25 '14 at 13:30
@Pete: I tried to add width to .post (width 100%, width 80% etc) but the same thing happens. — holyredbeard, Mar 25 '14 at 13:37
@holyredbeard you will need to make sure the widths of .post plus .main plus any left and right margin and padding of both elements when all added up do not exceed the width of main in order to get them both on one line — Pete, Mar 25 '14 at 13:43

score 1 · Answer 1 · answered Mar 25 '14 at 13:38

1

Float your main content left, and make it's width =XXpx . Try if that solve your problem. Let us know how it went.

EDIT: If you look closely, your text is not put down at bottom, but right after the imaginary line that would be present if the bottom of your left content is there. So, where the left content stops, that is where your right content start, and that is because of above mentioned problem. So just float:left your main content and see what happens.

answered Mar 25 '14 at 13:38

obey

796
7
16

This will do it. You may want to make the width of .post percentage based to make it stretch the full with of the window. – Phil Mar 25 '14 at 13:43
@obey: I suppose you mean #main with main content? Tried to give it float:left and set a width but still the same problem? – holyredbeard Mar 25 '14 at 13:59
I meant this id - `post-24` to have `float:left`. I tried it on your link and it works. – obey Mar 25 '14 at 14:01
@obey: Ah ok, and then remove the left margin? The problem is that I want a fluid design and can't set width to px (unless I use a lot of media queries). What I want is to have the sidebar in a fixed width and the main container fluid. – holyredbeard Mar 25 '14 at 14:15
@obey: Oh course I could use % instead of px, but that makes it quite hard to keep the margin between the main container and the browser window when changing size (width) of the browser. – holyredbeard Mar 25 '14 at 14:19
Well, hm,..in that case I would suggest using table perhaps,instead of divs. with 2 columns and 1 row. First column is sidebar, and second column is main content. Have you tried that? – obey Mar 25 '14 at 14:31

score 0 · Answer 2 · answered Mar 25 '14 at 13:45

Try changing .post to this:

.post {
    padding: 28px;
    padding-bottom: 5px;
    min-height: 400px;
    float: left;
    }

You will lose your width that you had, but the item will no longer be pushed down. You can then define the width if you need it.

Content in div gets pushed down

2 Answers2