1. Home
  2. Forums Index
  3. Browser Side / HTML 4:28 am May 1, 2026

Forum Moderators: open

Message Too Old, No Replies

How to make a div to full width of browser size

div full width

         

germanasperger99

6:01 pm on Feb 13, 2021 (gmt 0)

5+ Year Member



Hello, i am new to this forum and i am from germany - greetings! ;-)

The last expieriences i have had are more then 10 years in the past, i made websites with HTML, PHP and mySQL about in the year 2000.

In the meantime i created lots of Homepages with WordPress and Elementor.

Now i want to go back to HTML, CSS and PHP directly.

What i tried is, to create a div container who uses the complete width of the browser window. But i failed.

This is the template from WordPress and Elementor:
http://outfit.example.de/stylebox-konfigurator/

And this is what i made:
http://stylebox.example.de

The div-elements don't use the full width...
I want a width of 100% - what can i do?

main.css 
/* Google-Fonts */
@import url('https://fonts.googleapis.com/css?family=Exo+2');

/* HTML-Body */
body {
 
 /* Fonts */
 font-family: "Exo 2";
 
 /* body without border */
 margin-top: 0px; 
 margin-bottom: 0px; 
 margin-left: 0px; 
 margin-right: 0px;
 padding: 0;
 
 background-color: #fff;
}

h2 {
 font-family: "Exo 2";
 font-size: 32px;
 color: crimson;
}

/* main container for entire site */
.container {
 display: flex;
 width: 100%;
 width: 100vw;
 justify-content: space-between;
 align-items: stretch;
 align-content: space-between;
}

/* container for header */
.container_header {
 display: flex;
 margin: auto;
}

/* container for body */
.container_body {
 display: flex;
 flex-direction: column;
 min-height: 1024px;
}

/* container for footer */
.container_footer {
 display: flex;
}

/* Stylebox-Konfigurator */

 /* hide radio buttons */
 [type=radio] {
 position: absolute;
 opacity: 0;
 width: 0;
 height: 0;
 }

 /* hide check boxes */
 [type=checkbox] {
 position: absolute;
 opacity: 0;
 width: 0;
 height: 0;
 }

 /* mouse pointer */
 [type=radio] + img {
 cursor: pointer;
 }
 
 [type=checkbox] + img {
 cursor: pointer;
 }

 /* show border when radio button is activated */
 [type=radio]:checked + img {
 outline: 3px solid red;
 }

 /* show border when check box is activated */
 [type=checkbox]:checked + img {
 outline: 3px solid green;
 }


index.php 
<!DOCTYPE html>
<html>

 <!-- HTML header -->
 <?php include 'html_header.php'; ?>
 
 <body>
 
 <!-- global header -->
 <?php include 'global/header.php'; ?>
 
 <!-- begin main container -->
 <div class="container_body">
 <h2>W&auml;hle aus, f&uuml;r wen die Stylebox zusammengestellt wird.</h2>
 <hr>
 
 <!-- beginn form -->
 <form action="stylebox_konfigurator_frau_teileauswahl.php" method="post">
 
 <!-- beginn radio buttons -->
 <fieldset>
  <label>
  <input type="radio" name="radio_geschlecht" value="Mann"><img src="images/stylebox_konfigurator_auswahl_mann.png" width="80" height="100">
  </label>
  
  <label>
  <input type="radio" name="radio_geschlecht" value="Frau"><img src="images/stylebox_konfigurator_auswahl_frau.png" width="76" height="100">
  </label>
 
 <!-- end radio buttons-->
 </fieldset>
 
 <input type="submit" name="submit" value="Weiter">
 
 <!-- end form -->
 </form>
 
 <!-- end main container -->
 </div>
 
 <!-- global footer -->
 <?php include 'global/footer.php'; ?>
 
 </body>
 
</html>


header.php 
<div class="container_header">
 
 <!-- left area -->
 <div>
 TRENDline Logo
 </div>

 <!-- center area -->
 <div>
 Stylebox Logo
 </div>

 <!-- right area -->
 <div>
 <img src="images/leere-stylebox-mit-firmenlogo-und-produktlogo.png" width="133" height="128">
 </div>
 
</div>


footer.php 
<div class="container_footer">
 
 <!-- left area -->
 <div>
 Footer 1
 </div>

 <!-- center area -->
 <div>
 Footer 2
 </div>

 <!-- right area -->
 <div>
 Footer 3
 </div>
 
</div>


thanks
chris :-)



[edited by: not2easy at 6:46 pm (utc) on Feb 13, 2021]
[edit reason] Please use 'example' for domain name [/edit]

NickMNS

8:48 pm on Feb 13, 2021 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Hello germanasperger99 welcome to WW.

You don't exactly describe what the problem is, in other words what the result is that you are getting with your code. So here is an attempt to solve the issue. First your css class container_body doesn't have a width set. If you want the width to span the full body you need to set width to 100%. Now there maybe another issue, it could be that 100% almost fills the window but not fully. This issue is the result of the browser default styling for the body tag. It has a margin of 8px (my be a different value). To overcome this, set the body margin to 0. See below. 


body {margin:0;}
.container_body { width:100%}


Here is a demo that shows the effect of not setting the body margin to 0.
[jsfiddle.net...]

Edit: I was bored so I made the button in the demo reset automatically.
[jsfiddle.net...]
by bored I mean procrastinating

germanasperger99

9:39 pm on Feb 13, 2021 (gmt 0)

5+ Year Member



Hi, the problem is, i want the little white box at the right border of the body. All the content of the entire site should be 100%.

Screenshot:
https://s8.directupload.net/images/210213/temp/jnui6ysz.jpg [directupload.net]

NickMNS

1:44 am on Feb 14, 2021 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I assume that this refers to the image (<img> tag) in your header. Simply set container_header class to display: flex, and justify-content: space-between. and it should solve your problem. 
body{
 margin:0;
}
.container_header{
 display: flex;
 justify-content: space-between;
}

germanasperger99

3:27 pm on Feb 14, 2021 (gmt 0)

5+ Year Member



Okay now it works as it should - thank you :-)

Another question: On mobile devices the images and fonts are very tiny. How can i change this and make the items bigger?



Chris


[edited by: not2easy at 4:16 pm (utc) on Feb 14, 2021]
[edit reason] Please see ToS [webmasterworld.com] [/edit]

not2easy

4:31 pm on Feb 14, 2021 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



The css you have included here does not specify a font size so the fonts are shown at browser default size which is 16px. It appears that a css tutorial could help, w3schools offers free tutorials and you can learn at your own pace. Their css tutorials start here: https://www.w3schools.com/css/default.asp

The section on font size (https://www.w3schools.com/css/css_font_size.asp) explains that there are various ways to set your font sizes - they also recommend that you use a fallback font that is web safe. Most browsers have default fonts that will be shown.

NickMNS

5:33 pm on Feb 14, 2021 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Another question: On mobile devices the images and fonts are very tiny. How can i change this and make the items bigger?

This sounds like an issue with media queries, see the link below:
[developer.mozilla.org...]

Further to not2easy's post and suggestion, here is a link to Mozilla css tutorial, there is an option at the top of the page to change the language, including German, so that may help you.
[developer.mozilla.org...]

not2easy

6:01 pm on Feb 14, 2021 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



Thank you NickMNS - I have found the Mozilla tools most helpful and easy to use.

coothead

6:05 pm on Feb 14, 2021 (gmt 0)

5+ Year Member Top Contributors Of The Month



Hi there germanasperger99,

here is you code simplified somewhat, and also does
away with that very nasty - max-height: 1024px ... 


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Untitled document</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
html, body {
   height: 100%;
   margin: 0; 
 }
body {
   display:flex;
   flex-direction:column;
   padding: 0;
   background-color: #fff;
 /* Fonts */
  font: normal 1em / 1.62em 'Exo 2' sans-serif;
}

h2 {
   font-size: 2em;
   color: crimson;
}

/* main container for entire site */
 /* 
 .container {
 display: flex;
 width: 100%;
 flex-direction:column;
 justify-content: space-between;
 align-items: stretch;
 align-content: space-between;
}
*/
/* container for header */
 .container_header {
   display: flex;
   flex:0 0 auto;
 /*margin: auto;*/
   justify-content: space-between;
}

/* container for body */
.container_body {
   display: flex;
   flex: 1 0 auto;
   flex-direction: column;
 /*min-height: 1024px;*/
}

/* container for footer */
.container_footer {
   display: flex;
   flex:0 0 auto;
   justify-content: space-between;
}

/* Stylebox-Konfigurator */

 /* hide radio buttons */
/*
 [type=radio] {
 position: absolute;
 opacity: 0;
 width: 0;
 height: 0;
 }
*/
 /* hide check boxes */
/* [type=checkbox] {
 position: absolute;
 opacity: 0;
 width: 0;
 height: 0;
 }
*/
label {
 margin:0 0.5em;
}
 /* mouse pointer */
 [type=radio] + img,
 [type=checkbox] + img {
  cursor: pointer;
 }
 /*
 [type=checkbox] + img {
 cursor: pointer;
 }
*/
 /* show border when radio button is activated */
 [type=radio]:checked + img {
   outline: 3px solid red;
 }

 /* show border when check box is activated */
 [type=checkbox]:checked + img {
   outline: 3px solid green;
 }
</style>

</head>
<body>

<div class="container_header">
 
 <!-- left area -->
 <div>
   TRENDline Logo
 </div>

 <!-- center area -->
 <div>
   Stylebox Logo
 </div>

 <!-- right area -->
 <div>
   <img src="images/leere-stylebox-mit-firmenlogo-und-produktlogo.png" width="133" height="128" alt="produkt logo">
 </div>
 
</div>

 <!-- begin main container -->
 <div class="container_body">
 <h2>W&auml;hle aus, f&uuml;r wen die Stylebox zusammengestellt wird.</h2>
 <hr>
 
 <!-- beginn form -->
<form action="stylebox_konfigurator_frau_teileauswahl.php" method="post">
 <!-- beginn radio buttons -->
 <fieldset>
 <label>
   <input type="radio" name="radio_geschlecht" value="Mann" hidden>
   <img src="images/stylebox_konfigurator_auswahl_mann.png" width="80" height="100" alt="auswahl mann">
 </label>
 
 <label>
   <input type="radio" name="radio_geschlecht" value="Frau" hidden>
   <img src="images/stylebox_konfigurator_auswahl_frau.png" width="76" height="100" alt="auswahl frau">
 </label>

 <!-- end radio buttons-->
 </fieldset>
 
 <input type="submit" name="submit" value="Weiter">
 <!-- end form -->
</form>
 
<!-- end main container -->
 </div>
 
<div class="container_footer">
 <!-- left area -->
 <div>
   Footer 1
 </div>
 <!-- center area -->
 <div>
   Footer 2
 </div>
 <!-- right area -->
 <div>
   Footer 3
 </div> 
</div>
 
</body>
</html>


birdbrain

NickMNS

6:55 pm on Feb 14, 2021 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@birdbrain
and also does
away with that very nasty - max-height: 1024px

Can you explain what you did?

coothead

7:18 pm on Feb 14, 2021 (gmt 0)

5+ Year Member Top Contributors Of The Month



@NicKkMNS

Can you explain what you did?


I certainly can. :)

This is the basic flex method for making
"header". "main" and "footer" fill the page... 

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Flex full page</title>

<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->

<style media="screen">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
 } 

html, body {
  height: 100%;
  background-color: #f0f0f0;
  font: normal 1em / 1.62em sans-serif;
}

body {
  display: flex;
  flex-direction: column;
}

body > header,
body > footer {
  flex: 0 0 auto;
  padding: 1em;
  background: #ace;
}

main {
  flex: 1 0 auto;
  padding: 1em;
  background: #def;
}
</style>

</head>
<body>

 <header>
   <h1>Site Title</h1>
 </header>
  
 <main>
   <p>Sample Content</p>
 </main>
  
 <footer>
   <p>Disclaimer Here</p>
 </footer>

</body>
</html>


I trust that this basic code is self explanatory. ;)

birdbrain

germanasperger99

1:44 pm on Feb 15, 2021 (gmt 0)

5+ Year Member



@coothead: Thanks a lot for the help - now it works almost perfectly.

The css is already in a separate file, but i think my editor "brackets" puts the css-file in the header-section automatically? i dont know...

i have two little problems left:
1. how can i make a 20-px-space between the images in the header and the site border?
2. same in the body-section, i need a little bit space between text and browser border.

THX!


this is the main.css now: 
/* google fonts */
@import url('https://fonts.googleapis.com/css?family=Exo+2'); 

/* body */
html, body {
 height: 100%;
 margin: 0;
}

body {
 display: flex;
 flex-direction: column;
 font: normal 1em / 1.62em 'Exo 2' sans-serif;
}

/* h2 font */
h2 {
 font-family: 'Exo 2';
 color: #E30618;
 font-size: 2em;
}

/* footer fonts */
.nav_title_footer {
 font-family: 'Exo 2';
 color: #FFFFFF;
 font-size: 16px;
}

.nav_text_footer {
 font-family: 'Exo 2';
 color: #DDDDDD;
 font-size: 12px; 
}

/* header section */
.container_header {
 flex:0 0 auto;
 display: flex;
 justify-content: space-between; 
 height: 150px;
 background-color: #1D1E1F;
 flex-direction: row;
}

/* body section */
.container_body {
 display: flex;
 flex: 1 0 auto;
 flex-direction: column;
 background-color: #FFFFFF;
}

/* footer section */
.container_footer {
 flex:0 0 auto; 
 display: flex;
 justify-content: space-between;
 height: 200px;
 background-color: #E30618;
 flex-direction: row;
}

/* label */
label {
 margin:0 0.5em;
}

/* mouse pointer */
[type=radio] + img,
[type=checkbox] + img {
 cursor: pointer;
}

/* form submit button */
[type=submit] {
 border: 0;
 background-color: #E30618;
 color: #FFFFFF;
}

/* hide radio and checkbox elements */
[type=radio],
[type=checkbox] {
 position: absolute;
 opacity: 0;
 width: 0;
 height: 0;
}

/* show border when radio button is enabled */
[type=radio]:checked + img {
 outline: 3px solid red;
}

/* show border when checkbox is enabled */
[type=checkbox]:checked + img {
 outline: 3px solid green;
}





[edited by: not2easy at 1:47 pm (utc) on Feb 15, 2021]
[edit reason] PLEASE go read the rules [/edit]

coothead

2:46 pm on Feb 15, 2021 (gmt 0)

5+ Year Member Top Contributors Of The Month



Hi there germanasperger99,

for your three problems add this... 


.container_header,
.container_body,
.container_footer {
    padding: 0.5em 1.25em;
 }


...to your main.css file.

There are three other things that you need to do,
firstly add this very important meta tag... 


   <meta charset="utf-8">


...and secondly remove this redundant div... 


   <div style="width="100%;>

...and it's corresponding closing tag.

Lastly in your main.css file remove these
two item from .container_header and
.container_footer respectively... 


   height: 150px;
   height: 200px;


The page will then be fit to go. :)

coothead
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / HTML 4:28 am May 1, 2026