CSS/HTML Layout Help

Question

I'm using this code...

<div id="app">
    <div id="app-actionbar">
        topbar
    </div>
    <div id="app-userinfo">
        sidebar
    </div>
    <div id="app-content">
        content
    </div>
</div>

/** Styling **/

#app {
    border:1px solid #666;
}

#app-actionbar {
    color: #333;
    width: 900px;
    float: left;
    height: 45px;
    background: #D9D9DC;
    margin-top:10px;
}

#app-content { 
    float: left;
    color: #333;
    background: #FFFFFF;
    height: 350px;
    width: 725px;
    display: inline;
}

#app-userinfo { 
    color: #333;
    background:#F2F2F2;
    height: 350px;
    width: 175px;
    float: left;
}

However, it's not working like I want it to.

I want to add a border around it, but its not working (and its moving the content down).

enter image description here

You will have to be a bit more clear or supply an image of how you want it to actually look without the SO community guessing what you actually want to achieve. — Dan
– Dan, Commented Jun 9, 2011 at 2:00
I can tell what he wants... It's not a mystery. jsfiddle.net/P9AQp — Jared Farrish
– Jared Farrish, Commented Jun 9, 2011 at 2:02
@Jared, arrr, that layout pretty much looks like his screen shot (of what the problem is) — Dan
– Dan, Commented Jun 9, 2011 at 2:04
@Dan - Yes, I know; it's his exact posted markup/css. It wasn't difficult for me to see the problem when I looked at it. ;) — Jared Farrish
– Jared Farrish, Commented Jun 9, 2011 at 2:05

Dan · Accepted Answer · 2011-06-09 02:15:58Z

3

You need to clear the floated elements in your #app . Try adding overflow:hidden; or overflow:auto; to #app. That will get the border to wrap you entire DIV.

Here's a live jsfiddle link of your above snippets with the overflow:hidden assigned: http://jsfiddle.net/AhZAU/

The spacing at the top, "(and its moving the content down)", is being created by the margin-top:10px on the #app-actionbar. Remove the margin and the space will no longer be present: http://jsfiddle.net/AhZAU/1/

edited Jun 9, 2011 at 2:15

answered Jun 9, 2011 at 1:53

Dan

10.4k7 gold badges40 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

thirtydot Over a year ago

There are two parts to this question: "I want to add a border around it, but its not working (and its moving the content down)."

Dan Over a year ago

The border isn't working because the floated elements are not cleared. And it's being pushed down because he has a margin-top:10px assigned to the #app-actionbar DIV.

Dan Over a year ago

@thirtydot, I interpreted the question as in "I want the border to go all the way around but it's not working and instead is creating a margin space at the top". Which I guess is clear, once I've read over it a few times =P Cheers.

thirtydot Over a year ago

I'm not sure either, but his text "content" definitely looks in the wrong place to me, so that's why I think it's that. Let's wait for some feedback from the OP.

Jared Farrish Over a year ago

@Dan - I'm pretty sure @thirtydot is right. I had seen it down there but it' didn't register with me, I just thought it was odd. On second thought, I think @thirtydot's right.

|

Jared Farrish · Accepted Answer · 2011-06-09 02:16:32Z

2

The QuirksMode Way©:

#app {
    border:1px solid #666;
    overflow: auto;
    width: 100%;
}

http://jsfiddle.net/CePt6/

From the article:

If you want to add, say, a border around all floats (ie. a border around the container)...

NOTE

As far as the gap at the top, you can eliminate that by removing margin-top: 10px; from #app-actionbar.

#app-actionbar {
    color: #333;
    width: 900px;
    float: left;
    height: 45px;
    background: #D9D9DC;
}

http://jsfiddle.net/CePt6/2/

EDIT

Now, if you mean the content block is moving down, make the width of the #app the same width as your #app-actionbar:

#app {
    border:1px solid #666;
    overflow: auto;
    width: 900px;
}

http://jsfiddle.net/CePt6/3/

edited Jun 9, 2011 at 2:16

answered Jun 9, 2011 at 2:00

Jared Farrish

49.4k17 gold badges100 silver badges108 bronze badges

4 Comments

thirtydot Over a year ago

There are two parts to this question: "I want to add a border around it, but its not working (and its moving the content down)."

Jared Farrish Over a year ago

@thirtydot - Yes, I just remembered the second part. See my last edit. ;)

thirtydot Over a year ago

I think he means he wants the content to the right of the sidebar, not underneath it.

Jared Farrish Over a year ago

@thirtydot - Doh! Ok, added that too.

Praveen Lobo · Accepted Answer · 2011-06-09 02:01:07Z

Just for giggles, tried that but with some layout changes. Check if it helps. (demo here)

<div id="app">
    <div id="app-actionbar">
        topbar
    </div>
    <div id="app-userinfo">
        sidebar
    </div>
    <div id="app-content">
        content
    </div>
</div>

CSS:

#app {
    border:1px solid #666;
    clear:both;
    position:absolute;
}

#app-actionbar {
    color: #333;
    width: 900px;
    float: left;
    height: 45px;
    background: #D9D9DC;
    margin-top:0px; 
}

#app-content { 
    float: left;
    color: #333;
    background: red;
    height: 350px;
    width: 725px;
    display: inline; 

    left:200px;
    top:75px;
}

#app-userinfo { 
    color: #333;
    background:#F2F2F2;
    height: 350px;
    width: 175px;
    float: left;
    top:65px;

}

RandomWebGuy · Accepted Answer · 2011-06-09 02:15:02Z

1

this should do the trick. jsfiddle.net demo

#app {
border:1px solid #666;
height: auto;
overflow: auto;
width: 900px;
}

#app-actionbar {
color: #333;
width: 900px;
float: left;
height: 45px;
background: #D9D9DC;
}

#app-content { 
float: left;
color: #333;
background: #FFFFFF;
height: 350px;
width: 725px;
display: inline;
}

#app-userinfo { 
color: #333;
background:#F2F2F2;
height: 350px;
width: 175px;
float: left;
clear: left;
}

edited Jun 9, 2011 at 2:15

answered Jun 9, 2011 at 1:58

RandomWebGuy

1,43912 silver badges23 bronze badges

1 Comment

thirtydot Over a year ago

You should consider adding a jsFiddle demo of your code to your answer. As the moment, I have no way to see what code renders like without expending effort, so I'm not as likely to upvote your answer.

itsols · Accepted Answer · 2011-06-09 02:09:25Z

0

Here's what you can do:

Add the following lines to your #app div like this:

width:900px;
min-height: 300px;
overflow:auto;

The above is meant to auto-expand the outer div as the inner contents increase in length.

This however will be a restriction on older versions of IE since they did not have the min-height property.

answered Jun 9, 2011 at 2:09

itsols

5,5927 gold badges56 silver badges98 bronze badges

Collectives™ on Stack Overflow

CSS/HTML Layout Help

5 Answers 5

7 Comments

4 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

4 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related