[cheddarcheese]

Hello everyone,

I am making a HTML website. However at the moment it does not show up the full width of the browser.
Can anyone help me change the code to make the site display the full width of the web browser please.
I think I will have to add a "wrapper div" or could I make the width of the div's auto or 100%?

Here is my code:

Code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title>Homepage</title>
</head>
<body>
  <div id="header">
  </div>
  <div id="nav">
    <ul>
    <li><a href=#>Home</a></li>
    <li><a href=#>Links</a></li>
    <li><a href=#>Contact</a></li>
    </ul>
  </div>
  <div id="content">
    <h2>Welcome to the website!</h2>
    <p>The content goes here</p>
    <p>The content goes here</p>
    <p>The content goes here</p>
  </div>
</body>
</html>

Code

#nav {
  width: 15em;
  height: 200px;
  float: left;
  margin-top: 14px;
  margin-right: 18px
}

#nav a {
    text-decoration:none;
}

#nav ul{
    list-style: none;
    margin: 10px 0px 0px 0px;
    padding: 0px;
}

#nav li{
    border-bottom: 1px solid #ffffff;
}

#nav li a:link, #nav li a:visited {
    font-size: 15pt;
    font-weight: bold;
    display: block;
    padding: 3px 0px 3px 3px;
    background-color: #628794;
    color: #ffffff
}

#nav li a:hover, #nav li a:active {
    font-size: 15pt;
    font-weight: bold;
    display: block;
    padding: 3px 0px 3px 3px;
    background-color: #6cac46;
    color: #000000;
}

#content{
      width: 50em;
      float: left;
}

#content a {
    text-decoration: none;
    font-weight: bold;
}

#header {
    width: 66.125em;
    height: 5em;
    border: 5px solid #000;
    color:black;
}

[cheddarcheese]

Hi Malmoc, I don't give out my Skype on here!

[z0ck1]

The div width are by default 100% so if you dont put any width value in your css for the divs it should be working unless they are in position absolute or fixed in wich case you would have to simply put "100%" for the width.

note: for the em values i'ts the first time I see them used in this context usually its used for the text size. if it's not working you should maybe use "px" or "%" instead.

Edit: i'm a bit late listen to ~Dec ^^

[cheddarcheese]

Thanks for reply. I will try using your information on my code. Is there any tutorials on creating responsive web-pages? 🤝