How to make an element span the whole div?

Question

edit: Thanks to you awesome people the webpage finally looks awesome! I couldn't choose the best answer because all of them helped me a lot :p here's the result if anyone's interested https://i.stack.imgur.com/SMe5H.png

I'm trying to make a simple website with a site "logo" on the top, a navbar on the left, content in the center and some footer at the bottom.

At the same time I'm trying to make it responsive, which, obviously isn't a job for me yet :D

I'm pretty new to html and css so any advice would help a ton!

* { box-sizing: border-box;}

body { padding: 0; margin: 0; height:100%; }

header {
    height:100%;
    border:0.5vw ridge #888;
 background:linear-gradient(to right,#123,#368,#48A,#59B,#48A,#368,#123);

    text-align: center;
 font-size: 1.4vw;
}
header h1,h2 {
 color:#DD5;
 font-family: "Helvetica";
    margin: 0.5vw;
 padding-top: 0.5vw;
 line-height: 1.5vw;
 text-shadow: 0px 0px 0.5vw #000;
}

main {
 position: absolute;
 display: flex;
 width:100%;
 max-height:100%;
 
 background-color:#DDD;
 border: 2px solid #F0F;
}

nav {
 position: relative;
 display:block;
 overflow:auto;
 z-index: 0;
 float:left;
 height:100%;
 background: linear-gradient(90deg,#5BF,#29E);
 border:0.5vw ridge #888;
    max-width:100%; /*width 100% just makes the navbar all long and ugly*/
}
nav ul { margin:0; padding:0.5vw; list-style-type:none;}
nav li {
 display:block;
 width:100%;
 padding: 1vw 0.5vw 1vw 0.5vw;
 margin: 0.5vw auto;
 text-align: center;
 
 border:0.2vw outset white;
 border-radius:0.5vw;
 background:linear-gradient(180deg,#AAA 60%,#777);
}
nav a {
 margin:0vw 1vw;
    font-family: "Helvetica";
 font-weight: bold;
    font-size: 1.5vw;
 color: #DDD;
    line-height: 0.5;
 text-decoration:none;
 text-shadow: 0px 0px 0.3vw #000;
}

#content {
 position: relative;
 display: inline;
 float:left;
 z-index: 0;
 max-width:100%;
 background-color:grey;
 border: 2px solid green;
}

footer {
 width:100%;
 margin-top:auto;
 border: 2px dashed red;
}

<!doctype html>
<html lang="en">

<head>
<title>titlee</title>
<meta charset="UTF-8"/>
<meta name="keywords" content="keyowrdsssss" />
<meta name="description" content="descriptionnn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="icon" href="icon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>

<main>
<nav>
<ul>
  <li><a href="link">LinkToHome</a>
  <li><a href="link">link1</a></li>
  <li><a href="link">link2</a></li>
  <li><a href="link">longlink3</a></li>
  <li><a href="link">aboutlink</a></li>
</ul>
</nav>

<center>
<div id="content">
<h1>Content Content Content</h1></br>
<h1>Content Content Content</h1></br>
</div>
</center>

<footer>
<h1>footer</h1>
</footer>

</main>

</body>

</html>

The [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center) element is *long*-deprecated at this point; use CSS to centre your elements. — David Thomas, Jun 09 '16 at 17:44
It is kinda funny to see `` element from HTML 3.2 in conjunction with HTML5 elements. — Hashem Qolami, Jun 09 '16 at 17:59
I have literally just a day of experience with html, thanks for the advice :D — RandomStranger, Jun 09 '16 at 18:12

alexc · Answer 1 · 2016-06-09T17:38:14.367

You can try use;

width:100vw;

* { box-sizing: border-box;}

body { padding: 0; margin: 0; height:100%; }

header {
    height:100%;
    border:0.5vw ridge #888;
 background:linear-gradient(to right,#123,#368,#48A,#59B,#48A,#368,#123);

    text-align: center;
 font-size: 1.4vw;
}
header h1,h2 {
 color:#DD5;
 font-family: "Helvetica";
    margin: 0.5vw;
 padding-top: 0.5vw;
 line-height: 1.5vw;
 text-shadow: 0px 0px 0.5vw #000;
}

main {
 position: absolute;
 display: flex;
 width:100%;
 max-height:100%;
 
 background-color:#DDD;
 border: 2px solid #F0F;
}

nav {
 position: relative;
 display:block;
 overflow:auto;
 z-index: 0;
 float:left;
 height:100%;
 background: linear-gradient(90deg,#5BF,#29E);
 border:0.5vw ridge #888;
    max-width:100%; /*width 100% just makes the navbar all long and ugly*/
}
nav ul { margin:0; padding:0.5vw; list-style-type:none;}
nav li {
 display:block;
 width:100%;
 padding: 1vw 0.5vw 1vw 0.5vw;
 margin: 0.5vw auto;
 text-align: center;
 
 border:0.2vw outset white;
 border-radius:0.5vw;
 background:linear-gradient(180deg,#AAA 60%,#777);
}
nav a {
 margin:0vw 1vw;
    font-family: "Helvetica";
 font-weight: bold;
    font-size: 1.5vw;
 color: #DDD;
    line-height: 0.5;
 text-decoration:none;
 text-shadow: 0px 0px 0.3vw #000;
}

#content {
 position: relative;
 display: inline;
 float:left;
 z-index: 0;
 background-color:grey;
 border: 2px solid green;
  width:86vw;
}

footer {
  position: absolute;
 width:100%;
 border: 2px dashed red;
  bottom:0;
}

<!doctype html>
<html lang="en">

<head>
<title>titlee</title>
<meta charset="UTF-8"/>
<meta name="keywords" content="keyowrdsssss" />
<meta name="description" content="descriptionnn" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="icon" href="icon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<header>
<h1>Header title!</h1>
<h2>Header description!</h2>
</header>

<main>
<nav>
<ul>
  <li><a href="link">LinkToHome</a>
  <li><a href="link">link1</a></li>
  <li><a href="link">link2</a></li>
  <li><a href="link">longlink3</a></li>
  <li><a href="link">aboutlink</a></li>
</ul>
</nav>

<center>
<div id="content">
<h1>Content Content Content</h1></br>
<h1>Content Content Content</h1></br>
</div>
</center>
</main>
<footer>
<h1>footer</h1>
</footer>



</body>

</html>

if you change it to 80, it should have the desired effect. vw is short for viewport width, so as the name suggests setting it to 100 will take up 100% of the page, 80 to 80% etc etc. I have edited the post for you. — alexc, Jun 09 '16 at 17:34
I've tried various vw sizes,and the 80vw result is this: http://i.imgur.com/jEZc9OB.jpg I'm pretty sure the problem is that I positioned or displayed the divs incorrectly,I just have no idea how to fix that. — RandomStranger, Jun 09 '16 at 17:48
I edited the the code in my post with an updated example - which I think gives you what you want? — alexc, Jun 09 '16 at 17:52

elisa tramonti · Answer 2 · 2016-06-09T18:01:47.240

I'm not sure if this is exactly what you're looking for, but have you tried using the flex property?

try to have a look here, see if this is what you're looking for https://jsfiddle.net/jg2sjrL5/4/

  <div id="container">
     <div id="navigation">navigation</div>
     <div id="content"></p>content</p></p>content</p></p>content</p>
     </p>content</p></div>
  </div>
  <div id="footer">footer</div>


html, body {width: 100vw, height: 100vh}
#container {
  display:flex; 
  align-items: center;
  flex-direction:row;}
#main, #footer {
  width: 100vw;
  }
#main{
  display: flex;
  flex-direction: row;
}
#content {
  background-color:red;
  width: 80vw;
}
#navigation {
  background-color:white;
  width: 20vw;
    }
#footer {
  background-color:green;
}

you can eventually set the height of the different elements with vh to make them fit your page

wow never knew what flex was exactly but that's really what I was trying to achieve, thanks! — RandomStranger, Jun 09 '16 at 18:20

score 1 · Answer 3 · edited May 23 '17 at 11:52

Here's some guidance. Hope it helps.

html {
    box-sizing: border-box;          /* 1 */
    height: 100%;                    /* 2 */
}

*, *:before, *:after {
    box-sizing: inherit;             /* 1 */
}

body {
    margin: 0;                       /* 3 */
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

header {
  border: 0.5vw ridge #888;
  background: linear-gradient(to right, #123, #368, #48A, #59B, #48A, #368, #123);
  text-align: center;
  font-size: 1.4vw;
}

header h1, h2 {
    color: #DD5;
    font-family: "Helvetica";
    margin: 0.5vw;
    padding-top: 0.5vw;
    line-height: 1.5vw;
    text-shadow: 0px 0px 0.5vw #000;
}

main {                                /* 4 */
    flex: 1;                          /* consume remaining space in column */
    display: flex;
    background-color: #DDD;
    border: 2px solid #F0F;
}

nav {
     background: linear-gradient(90deg, #5BF, #29E);
     border: 0.5vw ridge #888;
}

nav ul {
    margin: 0;
    padding: 0.5vw;
    list-style-type: none;
}

nav li {
    padding: 1vw 0.5vw 1vw 0.5vw;
    margin: 0.5vw auto;
    text-align: center;
    border: 0.2vw outset white;
    border-radius: 0.5vw;
    background: linear-gradient(180deg, #AAA 60%, #777);
}

nav a {
    margin: 0vw 1vw;
    font-family: "Helvetica";
    font-weight: bold;
    font-size: 1.5vw;
    color: #DDD;
    line-height: 0.5;
    text-decoration: none;
    text-shadow: 0px 0px 0.3vw #000;
}

#content {
    flex: 1;                     /* consume remaining space in row */
    background-color: grey;
    border: 2px solid green;
}

footer {
    border: 2px dashed red;
}

<header>
    <h1>Header title!</h1>
    <h2>Header description!</h2>
</header>

<main>
    <nav>
        <ul>
             <li><a href="link">LinkToHome</a></li>
             <li><a href="link">link1</a></li>
             <li><a href="link">link2</a></li>
             <li><a href="link">longlink3</a></li>
             <li><a href="link">aboutlink</a></li>
        </ul>
    </nav>
    <div id="content">
        <h1>Content Content Content</h1>
        <h1>Content Content Content</h1>
    </div>
</main>

<footer>
    <h1>footer</h1>
</footer>

Note that in your original code you made use of CSS positioning and floats, and the HTML <center> element. You don't need position: absolute, position: relative or float: left to make this layout work when you have flexbox. And the <center> element is being phased out. You shouldn't use it and you don't need it.

never knew what box-sizing was and I just threw that into my code :D The flex works well though! — RandomStranger, Jun 09 '16 at 18:21

How to make an element span the whole div?

3 Answers3