Reputation: 33

How to make an element span the whole div?

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.sstatic.net/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>

Upvotes: 1

Answers (3)

Michael Benjamin

Reputation: 371799

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.

Upvotes: 1

elisa tramonti

Reputation: 251

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

Upvotes: 3

alexc

Reputation: 1310

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>

Upvotes: 3

How to make an element span the whole div?

Answers (3)

Related Questions