Setting up boxes with HTML and CSS

This site is best viewed in a modern browser with JavaScript enabled.

Volthair

Hello,

I'm kinda new to web-developing and I've searched my way here for some help regarding css and boxes. I found a picture with a basis I'd like to start working with, but I have no clue how to code those actual boxes in css to make them line up as I wish.

Here's a picture that I'd like my website's boxes to look like.

https://imageshack.com/i/0zd559p

Any help is appreciated, thanks!

jedaisoul

Setting up boxes like that is simple, the complex bit is how you want it to behave on different sized displays? E.g.

Do the header and footer need to be a fixed height?
Is the heading fixed height?
Are any of box1, box2 and/or box3 fixed width?

The precise code needed depends on the answers to these questions.

jedaisoul

The simplest (and traditional) way to code the boxes is as a fixed size. An outline of the code to produce an 800px wide by 760px high display is:

<!DOCTYPE HTML>
<html>
<head>
<title>demo</title>

<!-- ... other settings ... -->

<style>
#header,
#footer {
width: 800px;
height: 40px;
clear: both;
background-color: #F0F;
}
#heading {
width: 800px;
height: 120px;
clear: both;
background-color: #0FF;
}
#box1,
#box3 {
float: left;
width: 120px;
height: 560px;
background-color: #0FF;
}
#box2 {
float: left;
width: 560px;
height: 560px;
background-color: #0FF;
}
</style>
</head>
<body>
<div id="header">
<p>
this is the header.
</p>
</div>
<div id="heading">
<h1>the heading goes here.</h1>
</div>
<div id="box1">
<p>
box1.
</p>
</div>
<div id="box2">
<p>
box2.
</p>
</div>
<div id="box3">
<p>
box3.
</p>
</div>
<div id="footer">
<p>
this is the footer.
</p>
</div>
</body>
</html>

However, that is not always appropriate. Hence the questions above.

Volthair

Thanks for the fast reply!

I have worked a bit with the code you wrote for me. The boxes doesn't seem to line up, am I supposed to create another div to make all boxes fit within a bigger box, which I would call "content"? Am I on the track or just clueless?

jedaisoul

There are a number of assumptions in the code I gave, like:

Have you written the divs in the order I gave?
How are you handling overflow?

Anyway, you can use a "container" div, but you can just set body. You can then amend the widths of the boxes to be a % of the body. E.g.

<style>
body {
width: 800px;
height: 760px;
}
#header,
#footer {
width: 100%;
height: 40px;
clear: both;
background-color: #F0F;
}
#heading {
width: 100%;
height: 120px;
clear: both;
background-color: #0FF;
}
#box1,
#box3 {
float: left;
width: 15%;
height: 560px;
background-color: #0FF;
}
#box2 {
float: left;
width: 70%;
height: 560px;
overflow: scroll;
background-color: #0FF;
}
</style>

Volthair

Thanks,

I'm confused with this "%" thing. I'd like to use a couple of pixels as margin between box 1,2 and 3 (see the picture). I can't set any margins when using % as width, however when I use pixels instead of % I usually end up having one pixel short i.e when comparing the with the headline's width, which is 980px, I get the width of 979px with my three boxes, it really annoys me. And once I increase one box's width with 1px it doesn't fit...

If I expressed myself a bit weird, just tell me and I'll give it another try.

Volthair

Oh yeah, I have set the divs as you did.

Also, what does "overflow" actually mean?

jedaisoul

Volthair;1307841 wrote:
Thanks,

I'm confused with this "%" thing. I'd like to use a couple of pixels as margin between box 1,2 and 3 (see the picture). I can't set any margins when using % as width, however when I use pixels instead of % I usually end up having one pixel short i.e when comparing the with the headline's width, which is 980px, I get the width of 979px with my three boxes, it really annoys me. And once I increase one box's width with 1px it doesn't fit...

If I expressed myself a bit weird, just tell me and I'll give it another try.

If you find it easier to use pixels, that's fine. The reason for using percentages is that it makes it simpler to adjust the overall width by just amending the width of the body element.

jedaisoul

Volthair;1307843 wrote:
Oh yeah, I have set the divs as you did.

Also, what does "overflow" actually mean?

Overflow controls what to do if the text does not fit in a div:

overflow: hidden; Hides the text that does not fit.
overflow: scroll; Adds scroll bar(s) to allow the whole text to be viewed.

jedaisoul

Volthair;1307841 wrote:
Thanks,

I'm confused with this "%" thing. I'd like to use a couple of pixels as margin between box 1,2 and 3 (see the picture). I can't set any margins when using % as width, however when I use pixels instead of % I usually end up having one pixel short i.e when comparing the with the headline's width, which is 980px, I get the width of 979px with my three boxes, it really annoys me. And once I increase one box's width with 1px it doesn't fit...

If I expressed myself a bit weird, just tell me and I'll give it another try.

There are two issues here:

Pixel differences can be caused by different default margin and padding settings in different browsers. This is often resolved by including in the CSS:
{
margin: 0;
padding: 0;
}
If you want to include fixed width elements, you can have problems if you mix it with percentage widths, particularly in responsive designs. That is why it is better to base responsive designs on position absolute; and pixel settings. Position: absolute is more complex, but it is worth the effort to learn it.

Volthair

Alrighty!

I've worked a bit with position: absolute;. I managed to get the boxes where I want them, but as I am changing the browsers resolution it will not move along, it stays where it was set to stay. I need the box to adapt to which resolution is being used, any tricks?

Volthair

Alrighty!

jedaisoul

Position: absolute will adapt to different display sizes, so I'm not sure what the problem is. I really need you to post the code. You can use position: absolute in different ways. E.g.

left aligned, fixed width:

left: 0;
width: 200px;

right aligned, fixed width:

right: 0;
width: 200px;

full width:

left: 0;
right: 0;

left aligned, variable width:

left: 0;
right: 150px;

right aligned, variable width:

left: 150px;
right: 0;

Volthair

This box flees once I start to play with Chrome's size.

#box3 {
float: left;
width: 233px;
height: 350px;
margin-left: 10px;
position: absolute;
left: 954px;
top: 321px;
}

jedaisoul

Thanks. The problem is you are mixing float with position absolute. It has to be one or the other. So remove "float: left". Also, you have set a fixed width and left setting. That is not going to work with different display widths. There are two ways to solve this:

fixed width, right aligned:

width: 233px;
right: 0;

variable width, right aligned:

left: 954px;
right: 0;

However, the left setting is rather high. The box will still disappear if the window is less than 954px wide.

Volthair

I can't get it to work, it does still flee once I've removed float: left; and added a right: 0;

Here's both the html and css.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WorkArea</title>

</head>

<body>

<ul>
<li>contact</li>
<li>facebook</li>
<li>home</li>
<li>about</li>
</ul>

</div>

<div id="heading">
<h1>the heading goes here.</h1>
</div>

<h2> This is box three. </h2>

</div>
</div>

<div id="footer">
<p>
this is the footer.
</p>
</div>

</body>
</html>

CSS:

#content {
width: 980px;
background: white;
margin: -1em auto;
}

#header {
width: 980px;
height: 68px;
clear: both;
background-color: #F20F88;
margin: 2em auto;
}

#heading {
height: 200px;
clear: both;
background-color: #0FA6F2;
border: 3px solid #F20F88;
}

#box1 {
float: left;
width: 233px;
height: 350px;
margin-right: 10px;
}

#box3 {
width: 233px;
height: 350px;
margin-left: 10px;
position: absolute;
left: 954px;
right: 0;
top: 321px;
}

#box2 {
float: left;
width: 480px;
height: 350px;
overflow: scroll;
}

#footer {
width: 980px;
height: 40px;
clear: both;
margin: 2em auto;
background: #F20F88;
}

#box1, #box2, #box3 {
margin-top: 7px;
margin-bottom: 7px;
background: #0FA6F2;
border: 3px solid #F20F88
}

ul li{
display: inline-block;
float: right;
margin-right: 2.49500998004%;
margin-top: 26px;
margin-bottom: 10px;
padding: 0 10px;
font-size: 13px;
font-family: Georgia, "Times New Roman", Times, serif;
}

{
margin: 0;
padding: 0;
}

#box1 h2{
font-family:"Arial Black", Gadget, sans-serif;

color:#232323;

font-size: 13px;

line-height:21px;

}

jedaisoul

The problem is you are mixing position: static (the default) with position: absolute. That does not work. If you want to use position: absolute you have to be consistent.

So the CSS needs to be something like:

#content {
position: absolute;
left: auto; // this is the default
top: 0;
bottom: 0;
width: 980px;
background: white;
}

#header {
position: absolute;
left: 0;
top: 0;
width: 980px;
height: 68px;
background-color: #F20F88;
    }

#heading {
position: absolute;
left: 0;
top: 68px;
width: 100%;
height: 200px;
background-color: #0FA6F2;
// border: 3px solid #F20F88;
}

#box1 {
position: absolute;
left: 0;
top: 268px;
width: 233px;
bottom: 40px;
margin-right: 10px;
overflow: scroll;
}

#box2 {
position: absolute;
left: 233px;
right: 233px;
top: 268px;
bottom: 40px;
overflow: scroll;
}	
#box3 {
position: absolute;
right: 0;
top: 268px;
bottom: 40px;
width: 233px;
overflow: scroll;
}

#footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px;
background: #F20F88;
}

#box1, #box2, #box3 {
	background: #0FA6F2;
	// border: 3px solid #F20F88
}

Note: I've omitted the borders and butted the divs next to each other. That way the calculation of positions is simpler. Once you have grasped how it works, you can adjust the left, right, top and bottom settings to allow for the borders.

E.g.
top of the header is 0, and the height is 68px, so the top of the heading is 68px. Similarly the bottom of the footer is 0, and its height 40px, so the bottom of the boxes is 40px.

Natdizzle

Here is my solution, please note this example is a fixed width / height layout and you may need to resize the container depending on your needs.

[ATTACH=CONFIG]15929[/ATTACH]

<!-- Author: Nathan Nelson
http://www.nathanscomputerknowledge.com -->


<html>
<head>
<style type="text/css">
#container{width:500px;height:700px;}
#header{height:24px;background-color:lightblue;}
#subheader{height:160px;background-color:red;}
#contentleft{width:120px;height:200px;background-color:green;float:left;}
#contentcenter{width:260px;height:200px;background-color:blue;float:left;}
#contentright{width:120px;height:200px;background-color:orange;float:left;}
#footer{width:500px;height:24px;background-color:pink;float:left;}
</style>
</head>
<body>
<div id="container">
<div id ="header">
Logotype
</div>
<div id="subheader">

</div>
<div id="contentleft">

</div>
<div id="contentcenter">

</div>
<div id="contentright">

</div>
<div id="footer">

</div>
</div>

</body>
</html>

edit: added picture

The attachments of this post were removed during the platform migration in 2018

Volthair

I replaced your code with mine, it resulted in a mess.

https://imageshack.com/i/10e383p

I must have forgotten something when I replaced it, this looks awful

Volthair

@Natdizzle

Please, could you help me with setting up the margins between the three boxes? (See the picture on my first post)
I find that hard with %.