CODEWITHSUNDEEP
htmlcsslayoutcss-position
AddB
AddB

Reputation: 47

How to make a div the width of the container?

I've looked for a solution to this but can't seem to find one relevant. I basically want the div at the bottom with text in (encircled yellow) to be the full width of the container (coloured in red for reference)

Also, the div at the bottom doesn't seem centre on the page, why is this so?

enter image description here

HTML

<body>



    <header>
        <div class="container">
            <nav>
                <ul>
                    <li id="main_link"><a href="#">Website</a></li>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">News</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </header>


    <div class="showcase">
        <div class="container">

            <div class="showcase_overtext">
                <h1>A beautiful website</h1>
                <p>I did ma best</p>

            <div class="button">
                    <button>READ MORE</button>
                </div>
            </div>

            <div class="floating_section">
                <h1>FEATURED</h1>
            </div>

        </div>
    </div>

CSS:

/*Universal*/

body {
    margin:0;
    padding:0;
}

.container {
    text-align:center;
    margin:auto;
    width:80%;
    background:red;
}

/*Header*/

header {
    background-color:rgba(0,0,0,0.3);
    font-family:'Montserrat',sans-serif;
    padding:10px;
}

header ul {
    margin:0;
}

header ul li {
    display:inline;
    padding:0 10px 0 15px;
}

header ul li a {
    color:#353535;
    font-weight:bold;
    text-decoration: none;
}

#main_link {
    padding-right:50px;
}

/*Showcase*/

.showcase {
    height:500px;
    background-image:url('Showcase.jpg');
    background-size:cover;
    position:relative;
}

.showcase_overtext {
    color:#353535;
    font-family:'Montserrat',sans-serif;
    font-size:25px;
    font-weight:bold;
    position:absolute;
    top:300px;
    right:50px;
}

.showcase_overtext h1, p {
    margin:5px;
}

.button {
    text-align:center;
}

.floating_section {
    position:absolute;
    bottom:10px;
    display:inline-block;
}

Thank you

Upvotes: 1

Views: 97

Answers (2)

Jordan Soltman
Jordan Soltman

Reputation: 3903

You really don't want to use absolute elements the way you have. Absolute elements are removed from the flow of the page and thus take on their own sizing. Removing the absolute positioning gets the site much closer to your goal:

body {
  margin: 0;
  padding: 0;
}

.container {
  text-align: center;
  margin: auto;
  width: 80%;
  background: red;
}


/*Header*/

header {
  background-color: rgba(0, 0, 0, 0.3);
  font-family: 'Montserrat', sans-serif;
  padding: 10px;
}

header ul {
  margin: 0;
}

header ul li {
  display: inline;
  padding: 0 10px 0 15px;
}

header ul li a {
  color: #353535;
  font-weight: bold;
  text-decoration: none;
}

#main_link {
  padding-right: 50px;
}


/*Showcase*/

.showcase {
  height: 500px;
  background-image: url('Showcase.jpg');
  background-size: cover;
  position: relative;
}

.showcase_overtext {
  color: #353535;
  font-family: 'Montserrat', sans-serif;
  font-size: 25px;
  font-weight: bold;
  margin-top: 300px;
  right: 50px;
}

.showcase_overtext h1,
p {
  margin: 5px;
}

.button {
  text-align: center;
}

.floating_section {
  display: inline-block;
}
<header>
  <div class="container">
    <nav>
      <ul>
        <li id="main_link"><a href="#">Website</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>


<div class="showcase">
  <div class="container">

    <div class="showcase_overtext">
      <h1>A beautiful website</h1>
      <p>I did ma best</p>

      <div class="button">
        <button>READ MORE</button>
      </div>
    </div>

    <div class="floating_section">
      <h1>FEATURED</h1>
    </div>

  </div>
</div>

Upvotes: 1

kukkuz
kukkuz

Reputation: 42370

Center you absolutely positioned floating_section by adding left: 0 and right: 0 to it - see demo below:

body {
  margin: 0;
  padding: 0;
}

.container {
  text-align: center;
  margin: auto;
  width: 80%;
  background: red;
}

header {
  background-color: rgba(0, 0, 0, 0.3);
  font-family: 'Montserrat', sans-serif;
  padding: 10px;
}

header ul {
  margin: 0;
}

header ul li {
  display: inline;
  padding: 0 10px 0 15px;
}

header ul li a {
  color: #353535;
  font-weight: bold;
  text-decoration: none;
}

#main_link {
  padding-right: 50px;
}

.showcase {
  height: 500px;
  background-image: url('https://via.placeholder.com/500');
  background-size: cover;
  position: relative;
}

.showcase_overtext {
  color: #353535;
  font-family: 'Montserrat', sans-serif;
  font-size: 25px;
  font-weight: bold;
  position: absolute;
  top: 300px;
  right: 50px;
}

.showcase_overtext h1,
p {
  margin: 5px;
}

.button {
  text-align: center;
}

.floating_section {
  position: absolute;
  bottom: 10px;
  display: inline-block;
  left: 0; /* added */
  right: 0; /* added */
}
<header>
  <div class="container">
    <nav>
      <ul>
        <li id="main_link"><a href="#">Website</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>
<div class="showcase">
  <div class="container">
    <div class="showcase_overtext">
      <h1>A beautiful website</h1>
      <p>I did ma best</p>
      <div class="button">
        <button>READ MORE</button>
      </div>
    </div>
    <div class="floating_section">
      <h1>FEATURED</h1>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions