Okey, so I feel like an ass at the moment, but I have a problem that i don't know how to solve.

I have a wrapper sourounding 3 divs to keep them in the middle. These three divs are called header, content and footer and appears in that order. I want the content div to continue to expand if my text becomes too long, but it doesn't. When the text becomes too long, it instead pushes my two lists i've got in my content to the right. This makes the whole design mess up and i don't know what to search google for or even who to call.

I've not set a definitive height to anything except my footer and my header, but i've used min-height on both my wrapper and on my content.

Here's my code, straight out of dreamweaver... I'd appreciate quick answers, this is for an application due this friday.

HTML:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joakim Wimmerstedt</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="reset.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
  var myLatLng = new google.maps.LatLng(59.5, 15);
  var myOptions = {
    zoom: 6,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      myOptions);
  var flightPlanCoordinates = [
    new google.maps.LatLng(60.1329288, 13.0400091),
    new google.maps.LatLng(59.388653955136355, 13.520393371582031),
    new google.maps.LatLng(59.23972753736608, 17.991313934326172)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 3
  });

  flightPath.setMap(map);
}

</script>
</head>

<body onload="initialize()">
<div id="wrapper">
    <div id="header">
    </div>
    <div id="content">
        <div class="menu">
            <ul>
                <li><a href="index.html">the start</a></li>
                <li><a href="#">the problem</a></li>
                <li><a href="#">the solution</a></li>
                <li><a href="#">the applicant</a></li>
            </ul>
            <br style="clear: left" />
        </div>
        <div id="text">
        <h1 class="r1">Thanks for going through my Application!</h1>
        <br />
        <p class="ingress">My name is Joakim Wimmerstedt, and as I hope to be with you this autumn, this has been my application for your awesome Digital Media Program.</p>
        <p class="broed">I grew up in a little town in the northern part of wermland in sweden, just miles from the norwegian border. Being the small society that it was, it really gave me time to think about stuff. Like the future or why not everything floats.</p>
        <p class="broed">A romance is going on between me and my creativity. I absolutely love to create stuff, be it by scribbling down a few words, by sketching a flying pig or by coding a website.</p>
        <br />
      </div>
        <div id="map_canvas"></div>
    </div>
    <div id="footer">
        <div id="footer1">
            <ul class="footerlist"><div class="listrubrik">Things I do</div>
            <li>&#187; Write</li>
            <li>&#187; Design</li>
            <li>&#187; Code</li>
            </ul>
        </div>
        <div id="footer1">
            <ul class="footerlist"><div class="listrubrik">Things I Want to do</div>
            <li>&#187; Make clients Happy!</li>
            <li>&#187; Better Coding</li>
            <li>&#187; Better Design</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

CSS: @charset "utf-8";

/* CSS Document */

/*menu*/
.menu {
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    text-transform:uppercase;
    width: 100%;
    background-color:#BAB293;
    }

.menu ul{
    margin: 0;
    padding: 0;
    float: left;
    }

.menu ul li{
    display: inline;
    }

.menu ul li a{
    float: left; 
    text-decoration: none;
    color: #fff; 
    padding: 10.5px 11px;
    background-color:#BAB293;
    }

.menu ul li a:visited {
    color: #fff;
    text-decoration: none;
    }

.menu ul li a:hover, .menu ul li .current {
    color: #fff;
    background-color:#A39770;
    } 
/* end of menu */

/* google map */

#map_canvas {
    width:500px;
    height:320px;
    float:left;
    margin: 10.5px 11px;
}
/* end of map */

body {
    background-color:#EFE4BD;
}

#wrapper {
    width: 920px;
    min-height: 600px;
    padding: 10px;
    margin-right: auto;
    margin-left: auto;
}

#header {
    height: 40px;
    width: 900px;
    margin-right: auto;
    margin-left: auto;
}

#content {
    background-color:#FFF;
    margin-top:10px;
    width: 900px;
    min-height: 400px;
    margin-right: auto;
    margin-left: auto;
}

#text {
    width: 300px;
    min-height: 300px;
    margin: 10.5px 11px;
    float:left;
}

#footer {
    width: 900px;
    height: 90px;
    margin-top: 10px;
    margin-right: auto;
    margin-left: auto;
}

#footer1 {
    margin: 10px;
    float:left;
    font-family:Verdana, Geneva, sans-serif;
}

.footerlist li {
    text-transform:capitalize;
    font-size:14px;
}

.listrubrik {
    font-size:16px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    text-transform:uppercase;
}

p.ingress {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
}

p.broed {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    text-indent:40px;
}

h1.r1 {
    font-family:"Times New Roman", Times, serif;
    font-weight:bold;
    font-size:36px;
    font-variant: normal;
}

reset.css:

@charset "utf-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

:focus {
    outline: 0;
}
body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

3 answers

Ktash 1851
0
points
This was chosen as the best answer

You have a clear after the menu, but not after the text element.So basically:

<div id="text">
    ...
</div>
<div id="map_canvas"></div>
<br style="clear: both;" />

Or, what I prefer more:

<div class="clearer"></div>

and

.clearer { clear: both; }
Answered over 5 years ago by Ktash
  • What's better about the later one? I'm not really used to this clear thing at all... Joakim Wimmerstedt over 5 years ago
  • Its better because it uses pure CSS and separates content and style. Its just better in my opinion to not use inline styles when you can avoid it. Ktash over 5 years ago
1
point

There are several things I don't quite understand about this code. The lists you have are being pushed out of the way because they are not in the content area, they are in the footer. You could just move the whole footer to the end of the content element, and then add a clearfix right after the footer. That would stretch the white background of the content area down to cover the lists as well as any additional text you put in those paragraphs.

On another note, I don't understand why you would put the reset.css AFTER the style.css. CSS is cascading, so you would want your own style to come after the reset so that your code won't be trumped by the reset.

Answered over 5 years ago by Abinadi Ayerdis
  • Thanks for pointing out the bit about css, missed that one. The lists however, are supposed to be in the footer. The problem was that even though they weren't in the same container, they still moved inappropriately. Think of it like if this was a picture; this is what i want |Text Picture| |Text Picture| |Text | |Text ______| list list this is what i get |Text Picture| |Text Picture| |Text ______| Text list list Sorry for describing it so poorly. Joakim Wimmerstedt over 5 years ago
  • Sorry about the last comment! Not used to doctype yet... Anyway, here's two pics: http://img684.imageshack.us/i/howitis.jpg/ & http://img263.imageshack.us/i/howitis2.jpg/ . As you can see, the lists, that still shuold be in the footer, are pushed to the right by the expanding text-div. This is only because the content-div doesn't want to expand together with the text-div, so the text-div is far from it's own ground. Do you get the problem? Joakim Wimmerstedt over 5 years ago
0
points

what it this I am not understand this.NutraSlim

Answered over 5 years ago by sofiagorenstein