HTML and CSS

Kyon (912)
Hey, this is the lounge, I can post anything I want here, right? :P

Haven't done HTML and CSS in a while, hence why I ask. :)

My dad asked me to work on a website for his participation on a "rally-ish" event. He's going to drive for Kika, which contributes to research on different kinds of cancer that occur to children.
That's it for the background of my question, time for the question itself:

I want to place two divs directly next to each other (not underneath one another, which is currently the case). How would I go around doing that while not changing my current structure too much?

(The divs "icon" and "title" should be next to each other, just as with "links" and "content".)

NOTE: The childish coloring is just for now, I will change it when I get the images to use for this.
index.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/strict.dtd"/>
<html>
<head>
<title>Black Jeep Arctic Challenge for Kika</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css"/>
</head>
<body>
<div id="page">
<div>
<div id="icon">BLA<br/>BLABLA</div>
<div id="title"><h1>BLACK J.A.C.K.</h1>Black Jeep Arctic Challenge for Kika</div>
</div>
<div id="links">
<a href="content/home.html" target="frame">Home</a><br/>
<a href="content/team.html" target="frame">Team</a><br/>
<a href="content/auto.html" target="frame">Auto</a><br/>
<a href="content/kika.html" target="frame">Kika</a><br/>
<a href="content/blog.html" target="frame">Blog</a><br/>
<a href="content/foto.html" target="frame">Foto's</a><br/>
<a href="content/spon.html" target="frame">Sponsoren</a><br/>
<a href="content/wspo.html" target="frame">Sponsor worden</a><br/>
<a href="content/link.html" target="frame">Links</a><br/>
<a href="content/cont.html" target="frame">Contact</a><br/>
</div>
<div id="content"><iframe frameborder="0" width="100%" height="100%" name="frame" src="content/home.html"/>
<noframes>Deze pagina gebruikt frames. Om deze pagina goed te kunnen bekijken zult u frames ingeschakeld moeten hebben. Wanneer uw browser geen frames ondersteund is het aangeraden om een browser te downloaden die dit wel doet zoals Internet Explorer, Firefox of Google Chrome.</noframes></div>
</div>
</body>
</html>


stylesheet.css 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
a
{
    text-decoration:none;
}
a:link {}
a:visited {}
a:hover {}
a:active {}
#page
{
    background:    blue;
    display:    inline-block;
    height:        100%;
    margin-bottom:    2%;
    margin-right:    3%;
    margin-left:    3%;
    margin-top:    2%;
    width:        94%;
}
#icon
{
    background:    yellow;
    clear:        right;
    display:    inline-block;
    float:        left;
    height:        20%;
    width:        20%;
}
#title
{
    background:    black;
    color:        white;
    clear:        left;
    display:    inline-block;
    float:        right;
    margin-left:    20%;
    width:        80%;
    height:        20%;
}
#links
{
    background:    green;
    display:    inline-block;
    width:        20%;
    height:        80%;
}
#content
{
    background:    red;
    display:    inline-block;
    margin-left:    20%;
    width:        80%;
}


Thanks in advance.
Last edited on
thepedestrian (200)
Essentially using the clear property with a floated element makes sure that there is not floated content either to the right or the left. In your case, both for icon and title, you were clearing the containers (div) on the right and the left respectively. Additionally didn't need a margin with the title container because it's going to be flush. Therefore your width was adding to 100% instead of 80%. I think you might want to read up on the CSS-box model ( http://www.w3.org/TR/CSS2/box.html ).


Fixing the CSS should do the trick. Use the following CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
a
{
    text-decoration:none;
}
a:link {}
a:visited {}
a:hover {}
a:active {}
#page
{
    background:    blue;
    display:    inline-block;
    height:        100%;
    margin-bottom:    2%;
    margin-right:    3%;
    margin-left:    3%;
    margin-top:    2%;
    width:        94%;
}
#icon
{
    background:    yellow;
    display:    inline-block;
    float:        left;
    height:        20%;
    width:        20%;
}
#title
{
    background:    black;
    color:        white;
    display:    inline-block;
    float:        left;
    width:        80%;
    height:        20%;
}
#links
{
    background:    green;
    display:    inline-block;
    width:        20%;
    height:        80%;
}
#content
{
    background:    red;
    display:    inline-block;
    margin-left:    20%;
    width:        80%;
}
Last edited on
NGen (689)
Or you could use <span>. It's the same as a <div>, just doesn't force the elements to to vertical.
Kyon (912)
Ah, okay. But I've got another question:
As seen, the main div (with id="page") contains all other divs. (It's indicated with a blue background.) How to scale it vertically, since no matter what I do, it stays to a fixed size (which is about 1/5th of what it should be, not precisely); whenever I change the height, there is no actual result. How do I change it's vertical size (and scale the navigation and content divs to fit it vertically)?
thepedestrian (200)
I typed up a whole explanation before my internet failed and apologies for the late response. Just been super busy.

Essentially what you need to do is set the height of the parent elements to 100% and they expand the interior elements. You also have to account for margins/padding so refer to the CSS box model link.

Here is the updated CSS. I figured you would want the content aligned with the navigation so I updated it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
html, body
{
    height:100%;
}
body
{
    margin:0;
    padding:0;
}
a
{
    text-decoration:none;
}
a:link {}
a:visited {}
a:hover {}
a:active {}
#page
{
    background:    blue;
    display:    inline-block;
    height:        100%;
    margin-right:    3%;
    margin-left:    3%;
    width:        94%;
}
#icon
{
    background:    yellow;
    display:    inline-block;
    float:        left;
    height:        20%;
    width:        20%;
}
#title
{
    background:    black;
    color:        white;
    display:    inline-block;
    float:        left;
    width:        80%;
    height:        20%;
}
#links
{
    background:    green;
    display:    inline-block;
    width:        20%;
    height:        80%;
    float:left;
}
#content
{
    background:    red;
    display:    inline-block;
    margin-left:    0;
    width:        80%;
    height:80%
    float: left;
}
Topic archived. No new replies allowed.