Skip to main content
D
dmshotwell
Participating Frequently
January 26, 2017
Answered

Make div width 100% of browser

  • January 26, 2017
  • 2 replies
  • 1915 views

I can't get my div to 100% of the browser. I have tried it using an  image and using just a div. My navigation stretches fine, so can some please help me? TY

<div id="line">

<img src="images/contact.jpg" width="1200" height="40" alt=""/>

</div>

<div class="lineBlk">

</div>

CSS style sheet

#line img  {

  width: 100%;

  height: 40px;

  padding: 0;

  margin: 0;

}

.lineBlk  {

  width: 100%;

  height: 40px;

  padding: 0;

  margin: 0;

  background-color: rgba(0,0,0,1.00);

This topic has been closed for replies.
Correct answer pziecina

I want one of the black divs to stretch 100% across the browser. I have 2 because I'm trying to figure out my issue. Thank you for your help, I'm just getting back into DW and a lot has changed.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Integrity IT Group</title>

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

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/adamina:n4:default.js" type="text/javascript"></script>

</head>

<body>

<div id="container">

<div id="header">

       <img src="images/header.jpg" width="2000" height="240" alt=""/>

       <h2 class="webadd">www.IntegrityITGroup.net</h2>

       <div id="contact">Contact</div>

</div>

    <h1 class="title">Excellence in IT</h1>

<div id="body2">

<div id="one">

    <h2 class="title2">IT System Support</h2>

      <ul class="left">

    <li>Secure Remote Access Solutions</li>

        <li>Centrally Managed Remote Systems</li>

        <li>Secure Your Data On All Your Systems</li>

      </ul>

</div>

<div id="two">

    <img src="images/SecurityDW.png" width="400" height="276" alt=""/>

</div>

    <div id="three">

    <h2 class="title2">IT System Development</h2>

        <ul class="right">

    <li>Mobile App Development</li>

        <li>Deploy Authenticating Website</li>

     </ul>

</div>

  <div id="center">

     <h2 class="title3">IT Education</h2>

      <ul class="center">

     </ul>

</div>

  <div id="line">

<img src="images/contact.jpg"  alt=""/>

</div>

  <div class="lineBlk">

  

</div>

<!-- body2--></div>

<!-- container--></div>  

<footer>

</footer>

</body>

</html>

--------------------------------------------------------

@charset "utf-8";

/* CSS Document */

#container {

  width: 100%;

  height: 100%;

  top: 0px;

  left: 0px;

  padding-top: 0px;

  margin-top: -8px;

  margin-left: -8px;

  min-width: 1200px;

}

body {

  width: 100%;

}

#contact {

  position: absolute;

  top: 207px;

  right: 320px;

  color: rgba(247,247,247,1.00);

  font-size: 20px;

}

.webadd {

  position: absolute;

  top: 75px;

  right: 200px;

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

}

.title {

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

  text-align: center;

  padding-top: 20px;

}

#header {

  width: 100%;

  height: 240px;

}

#body2 {

  width: 1225px;

  max-height: 100%;

  position: absolute;

  top: 375px;

  left: 170px;

}

#one {

  min-width: 350px;

  min-height: 276px;

  float: left;

  border: thin solid rgba(0,0,0,1.00);

  padding-left: 25px;

  width: 360px;

  height: 276px;

}

.title2 {

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

}

.title3 {

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

  text-align: center;

  padding-left: 375px;

}

.left {

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

}

.right {

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

}

.center {

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

  height: 50px;

  border: thin solid rgba(0,0,0,1.00);

  width: 100%;

}

#line img  {

  width: 100%;

  height: 40px;

  padding: 0;

  margin: 0;

}

.lineBlk  {

  width: 100%;

  height: 40px;

  padding: 0;

  margin: 0;

  background-color: rgba(0,0,0,1.00);

}

#two img {

  width: 400px;

  height: 276px;

  border: thin solid rgba(0,0,0,1.00);

  padding-left: 20px;

  margin: 0;

  padding-right: 20px;

}

#three {

  min-width: 350px;

  min-height: 276px;

  border: thin solid rgba(0,0,0,1.00);

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

  clear: none;

  float: right;

  width: 360px;

  padding-left: 25px;

  position: relative;

  top: -282px;

  left: -10px;

  height: 275px;

}


Sorry to tell you this but your css is a mess.

You are setting min-widths then explicit height and width values, overriding you % values or min settings.

Also do not use absolute positioning unless you have a very good reason.

Lets take the following -

#three {

  min-width: 350px;

  min-height: 276px;

  border: thin solid rgba(0,0,0,1.00);

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

  clear: none;

  float: right;

  width: 360px;

  padding-left: 25px;

  position: relative;

  top: -282px;

  left: -10px;

  height: 275px;

}

You start by setting a min-width/height, you then set explicit width/height values later in your code, these take precedence in the css cascade as they appear later.

To add to the confusion you then set a top/left value for the div #three.

Can I suggest that you learn how css works -

https://www.w3.org/developers/

2 replies

Jon Fritz
Jon Fritz
Adobe Expert
January 26, 2017

width:100% in css will only make an item 100% of its parent's width setting.

If there is a parent element somewhere above the image that is set to something less than 100% of the viewport width, the child elements will never go larger if set in % widths. For example...

<div id="container" style="width:800px;">
     <div id="subcontainer" style="width:100%;">

          <img style="width:100%" src="yourpic.jpg">
     </div>

</div>

In this example, the image can't be more than 800 pixels wide since it's set to 100% of the "subcontainer", which is set to 100% of the width of the "container", which is set to 800 pixels.

If you could share a link to your page, I'm betting one of the contributors here could find the conflict and point you in the right direction.

D
dmshotwellAuthor
Participating Frequently
January 26, 2017

I changed my container to width 100% but it still don't work. Is there

something else I'm missing?

On Thu, Jan 26, 2017 at 9:29 AM, Jon Fritz II <forums_noreply@adobe.com>

pziecina
pziecina
Brainiac
January 26, 2017

If you are expecting the image to be 100% of the browser width, then remove the explicit width and height attributes.

<img src="images/contact.jpg" width="1200" height="40" alt=""/>

should be

<img src="images/contact.jpg" alt=""/>

Note: because you are setting an explicit height your image will become distorted, and may not go above the actual width included in the image header anyway.

D
dmshotwellAuthor
Participating Frequently
January 26, 2017

Okay, I did and it still don't work. Also on the other div there was only

100% width on it and it don't work. I'm really stumped on this!

pziecina
pziecinaCorrect answer
Brainiac
January 26, 2017

I want one of the black divs to stretch 100% across the browser. I have 2 because I'm trying to figure out my issue. Thank you for your help, I'm just getting back into DW and a lot has changed.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Integrity IT Group</title>

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

<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/adamina:n4:default.js" type="text/javascript"></script>

</head>

<body>

<div id="container">

<div id="header">

       <img src="images/header.jpg" width="2000" height="240" alt=""/>

       <h2 class="webadd">www.IntegrityITGroup.net</h2>

       <div id="contact">Contact</div>

</div>

    <h1 class="title">Excellence in IT</h1>

<div id="body2">

<div id="one">

    <h2 class="title2">IT System Support</h2>

      <ul class="left">

    <li>Secure Remote Access Solutions</li>

        <li>Centrally Managed Remote Systems</li>

        <li>Secure Your Data On All Your Systems</li>

      </ul>

</div>

<div id="two">

    <img src="images/SecurityDW.png" width="400" height="276" alt=""/>

</div>

    <div id="three">

    <h2 class="title2">IT System Development</h2>

        <ul class="right">

    <li>Mobile App Development</li>

        <li>Deploy Authenticating Website</li>

     </ul>

</div>

  <div id="center">

     <h2 class="title3">IT Education</h2>

      <ul class="center">

     </ul>

</div>

  <div id="line">

<img src="images/contact.jpg"  alt=""/>

</div>

  <div class="lineBlk">

  

</div>

<!-- body2--></div>

<!-- container--></div>  

<footer>

</footer>

</body>

</html>

--------------------------------------------------------

@charset "utf-8";

/* CSS Document */

#container {

  width: 100%;

  height: 100%;

  top: 0px;

  left: 0px;

  padding-top: 0px;

  margin-top: -8px;

  margin-left: -8px;

  min-width: 1200px;

}

body {

  width: 100%;

}

#contact {

  position: absolute;

  top: 207px;

  right: 320px;

  color: rgba(247,247,247,1.00);

  font-size: 20px;

}

.webadd {

  position: absolute;

  top: 75px;

  right: 200px;

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

}

.title {

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

  text-align: center;

  padding-top: 20px;

}

#header {

  width: 100%;

  height: 240px;

}

#body2 {

  width: 1225px;

  max-height: 100%;

  position: absolute;

  top: 375px;

  left: 170px;

}

#one {

  min-width: 350px;

  min-height: 276px;

  float: left;

  border: thin solid rgba(0,0,0,1.00);

  padding-left: 25px;

  width: 360px;

  height: 276px;

}

.title2 {

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

}

.title3 {

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

  text-align: center;

  padding-left: 375px;

}

.left {

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

}

.right {

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

}

.center {

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

  height: 50px;

  border: thin solid rgba(0,0,0,1.00);

  width: 100%;

}

#line img  {

  width: 100%;

  height: 40px;

  padding: 0;

  margin: 0;

}

.lineBlk  {

  width: 100%;

  height: 40px;

  padding: 0;

  margin: 0;

  background-color: rgba(0,0,0,1.00);

}

#two img {

  width: 400px;

  height: 276px;

  border: thin solid rgba(0,0,0,1.00);

  padding-left: 20px;

  margin: 0;

  padding-right: 20px;

}

#three {

  min-width: 350px;

  min-height: 276px;

  border: thin solid rgba(0,0,0,1.00);

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

  clear: none;

  float: right;

  width: 360px;

  padding-left: 25px;

  position: relative;

  top: -282px;

  left: -10px;

  height: 275px;

}


Sorry to tell you this but your css is a mess.

You are setting min-widths then explicit height and width values, overriding you % values or min settings.

Also do not use absolute positioning unless you have a very good reason.

Lets take the following -

#three {

  min-width: 350px;

  min-height: 276px;

  border: thin solid rgba(0,0,0,1.00);

  font-family: adamina;

  font-style: normal;

  font-weight: 400;

  clear: none;

  float: right;

  width: 360px;

  padding-left: 25px;

  position: relative;

  top: -282px;

  left: -10px;

  height: 275px;

}

You start by setting a min-width/height, you then set explicit width/height values later in your code, these take precedence in the css cascade as they appear later.

To add to the confusion you then set a top/left value for the div #three.

Can I suggest that you learn how css works -

https://www.w3.org/developers/

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices