CODEWITHSUNDEEP
htmlcss
pvtctrlalt
pvtctrlalt

Reputation: 61

css stop div expanding to whole screen

Hi im working on a college project and am trying to get the container div to not expand to the whole page so that i can centre it as you can see with the picture below the outline is expanding to the whole page witch i dont want it to do

enter image description here

and here is the code

<div class = "LivingHolder">
                <a href="https://www.guildwars2.com/en/the-game/releases/january-2013/" class = "livingImage">
                    <img src="Images/livingworld/ep1.jpg">
                </a>    
                <div class = "livingdate">
                    <p>Episode 1</p>
                    <p>Flame and frost prelude</p>
                    <p>January,2013</p>
                </div>
                <div class="livingcaption">
                    <p>The sky falls and the ground shakes in the lands 
                    of the north. Charr and norn refugees crawl from the wreckage of their homes
                    in the Wayfarer Foothills and Diessa Plateau, struggling to find shelter in 
                    the south. The call goes out for volunteers to assist the victims in this time 
                    of need, when earth and sky seem to have become the enemy…</p>
                </div>
            </div>

    LivingHolder{
    border:3px solid #989898;
    overflow: hidden;
}
.livingImage{
    width:20%;
    height:20%;
    float:left;
}
.livingdate{
    text-align: left;
    background-color:yellow;
    float:left;
    margin-top:2.5%;
}
.livingcaption{
    width:50%;
    background-color:red;
    float:left;
    text-align: left;
}

Upvotes: 2

Views: 3367

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196296

First of all the LivingHolder rule is missing the initial .. It should be .LivingHolder

Now, setting a width to this element and giving margin:0 auto will restrict the width and center it.

.LivingHolder{
    border:3px solid #989898;
    overflow: hidden;

    width:800px; /*add the width you want here*/
    margin:0 auto;
}

update after comment

If you also want the heights of the inner sections to be equal you should remove the float and use the flexbox.

.LivingHolder {
  border: 3px solid #989898;
  width: 800px;
  margin: 0 auto;
  display:flex;
}

.livingImage {
  width: 20%;
  height: 20%;
}
.livingImage img{max-width:100%;display:block;}
.livingdate {
  text-align: left;
  background-color: yellow;
  margin-top: 2.5%;
  max-width:30%;
}

.livingcaption {
  width: 50%;
  background-color: red;
  text-align: left;
}
<div class="LivingHolder">
  <a href="https://www.guildwars2.com/en/the-game/releases/january-2013/" class="livingImage">
    <img src="http://lorempixel.com/400/400/abstract/1">
  </a>
  <div class="livingdate">
    <p>Episode 1</p>
    <p>Flame and frost prelude</p>
    <p>January,2013</p>
  </div>
  <div class="livingcaption">
    <p>The sky falls and the ground shakes in the lands of the north. Charr and norn refugees crawl from the wreckage of their homes in the Wayfarer Foothills and Diessa Plateau, struggling to find shelter in the south. The call goes out for volunteers to
      assist the victims in this time of need, when earth and sky seem to have become the enemy…</p>
  </div>
</div>

Upvotes: 2

DibsyJr
DibsyJr

Reputation: 884

Set a width for the container element whilst taking into account the widths of the contained elements. The problem is though, that by doing this it will affect the contained elements because you've given them percentage widths (which is dependent on the parent) so by reducing the width of the container div to something that's not reaching the edges it could affect the contents. So it might be worth increasing the widths of the contained elements so it might be worth trying something like this:

.LivingHolder{
    width: 900px;
    border:3px solid #989898;
    overflow: hidden;
    margin: auto;
}
.livingImage{
    width:35%;
    height:35%;
    float:left;
}
.livingdate{
    text-align: left;
    background-color:yellow;
    float:left;
    margin-top:2.5%;
}
.livingcaption{
    width:65%;
    background-color:red;
    float:left;
    text-align: left;
}

However, this will be using up all of the remaining space inside the parent div so if you want to add something else on the same line you will need to change the widths to account for the extra child. Change the width within .LivingHolder to what you want

Upvotes: 2

Related Questions