CODEWITHSUNDEEP
css
Rico
Rico

Reputation: 6052

CSS Inner Div Fill Outer Div

I'm new to CSS and have a question about expanding the content of an inner DIV to fill the entire outer div.

I have been researching an answer to my problem for hours and have found dozens of similar questions, but none of the suggested solutions work for me. I'm sure it's that I'm misunderstanding something fundamental, but I can't seem to put my finger on it.

I need to have the blue background cover the entire block between "Some other stuff" and "More different stuff" and the text must be centered vertically and horizontally in the blue block - and maintain the same hover qualities and text-decoration rules.

<div>
    <span>Some other stuff</span>
</div
<div class="outer-container">
    <h2>
        <a class="inner-container" href="https://www.google.com" target="_blank">
            Lorem ipsum
        </a>
    </h2>
</div>
<div>
    More different stuff
</div>

I have so much trouble with CSS because I don't know how to gracefully describe what I'm wanting - I'm a developer not a designer!

.outer-container {
  background-color: #337AB7;
  text-align: center;
  vertical-align: middle;
  position: relative;
}

.inner-container {
  background-color: #337AB7;
  color: #fff;
  height: 100%;
  font-size: x-large;
  &:focus, &:hover, &:link {
    background-color: #286090;
    color: #fff;
    text-decoration: none;
  }
}

If I put the focus, hover CSS stuff in the outer-container the hover mechanics are not consistent.

I hope I'm making sense...like I said, I have a horrible time explaining design stuff.

Any suggestions?

Upvotes: 0

Views: 2725

Answers (4)

Daniel
Daniel

Reputation: 506

If a was you i would make a div-container and inside the div(innerContainer) insert the a-link-tag. So the Conainer does what its called (contain-something), applies the color as you want it and the link also works fine.

like this:

<div class="outer-container">
     <div class="inner-container" >
        <a href="http://www.google.com" target="_blank">Lorem ipsum dolor sit</a>
     </div>
 </div>

Upvotes: 1

Katana314
Katana314

Reputation: 8630

Just in case the outer-container responses don't help, an alternative is to set display: block on inner-container. Block-level elements are the ones that take up all available horizontal space on their parent by default (an example might be, one of these answers), and "inline-level" elements like a (by default anyway) can be placed in the middle of a block of text, only affecting its own text without re-flowing any layout around it.

Upvotes: 0

Shrinivas Shukla
Shrinivas Shukla

Reputation: 4463

You just need to set background color to outer-container.

When you set background-color to <a> tag, the background color is assigned to the text only.

Here is you updated fiddle.

Here is the snippet.

.outer-container {
  text-align: center;
  vertical-align: middle;
  position: relative;
  background: #337AB7;
}
.inner-container {
  background-color: #337AB7;
  color: #fff;
  height: 100%;
  font-size: x-large;
}
<div> <span>Some other stuff</span>

</div>
<div class="outer-container"> <a class="inner-container" href="http://www.google.com" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum purus vel iaculis accumsan. Nulla vel massa velit. Proin a nisl vel tortor tincidunt pharetra. Nulla tristique porttitor erat. In laoreet, erat non ultricies vulputate, massa mauris tempor ligula, sed dignissim ex augue sit amet sapien. Donec malesuada massa eget turpis consectetur, at feugiat velit aliquam. Fusce dictum ornare dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer non consectetur nunc, at sollicitudin nibh.</a>

</div>
<div>More different stuff</div>

Upvotes: 3

MattieTK
MattieTK

Reputation: 521

Why can you not change the background colour to be on the parent .outer-container?

This would solve your immediate issue.

See http://jsfiddle.net/n1gva5b4/

Upvotes: 1

Related Questions