Is there a way to align a DIV within another DIV such that the space above and below it are evenly distributed?

Question

Is there a way to align a DIV within another DIV such that the space above and below it are evenly distributed?

I need help with the layout of this HTML code:

<div id="outer">
    <div class="content left"></div>
    <div class="content right">
       <div class="fill">
           <div class="blue">
             xxx <br> xxx
           </div> 
    </div>
</div>

This is the CSS used:

 body, html { height: 100%; }
#outer { position:absolute; margin:5%; bottom:0; top:0; left:0; right:0; overflow:hidden; }
.content { position:absolute; width:50%; height:100%; }
.content.left { background-color:yellow; }
.content.right { background-color:red; left:50%; }
.fill { padding: 2em; background-color: green; height: 100%;}
.blue { background-color: blue; }

You can view a live demo on JSFiddle.

My question is how can I adjust the spacing above and below the blue DIV to be equal in height?

html css

Answer 1

Answer №1

Try using the code snippet below:

.blue { 
  position:absolute;
  top:50%;
  background-color: blue;
}

If you need more guidance on vertically aligning content, check out this helpful resource Link

Answer 2

Try using the code snippet below:

.blue { 
  position:absolute;
  top:50%;
  background-color: blue;
}

If you need more guidance on vertically aligning content, check out this helpful resource Link

Answer 3

Answer №2

Is your inquiry prompted by the unexpected results you're seeing or a lack of programming knowledge? My reason for asking is due to the oversight of closing the "fill" DIV tag.

If this isn't the issue, consider setting the position to absolute.

.blue{
    position: absolute;
    background-color: blue;
    padding: 10px;
}

Answer 4

Is your inquiry prompted by the unexpected results you're seeing or a lack of programming knowledge? My reason for asking is due to the oversight of closing the "fill" DIV tag.

If this isn't the issue, consider setting the position to absolute.

.blue{
    position: absolute;
    background-color: blue;
    padding: 10px;
}

Is there a way to align a DIV within another DIV such that the space above and below it are evenly distributed?

Answer №1

Answer №2

Similar questions

What is the specified height for the AppBar and Toolbar components in Material-UI?

The function of JQuery .click() is successful when used on a local machine, however it is not functioning

Issue with spacing between Bootstrap boxes not functioning as expected

Dynamically generate angular checkbox columns

Incorrect implementation of Bootstrap CSS in Jade template

When data is sent to a function through ejs, crucial information becomes accessible on the html page sources

The concept of see-through backgrounds

What is the best way to reset an element to its default state upon clicking a div using jQuery?

Incorporate a particular video directly into HTML code

turning every input field's border to red if none of them were filled out at least once

A guide on retrieving values from programmatically created input elements in Java

Does applying a style to an element that already has the same value result in a decrease in performance? Alternatively, do all browsers simply overlook it?

Elements that possess identical class attributes yet exhibit dynamic behavior

Can you explain how the CSS hack *+html works?

Sending PHP URL parameters results in a 404 error page

Deleting a row from a table when a similar element is found in another location

Move the HTML5 range input arrow to the top left corner

I'm looking for a tool that can convert Flash/Flex AS3 TextLayoutFormat data into HTML and CSS

What is the best way to make two divs appear side by side without causing the content below to shift as well?

The action of Document.write results in the page being overwritten only a single time