creating divs inside a parent div with varying heights and using auto margins

Question

creating divs inside a parent div with varying heights and using auto margins

Can anyone help me with this code snippet?

<div style="position: relative;">
    /***main***/

    <div style="top:0">
        /*****Content1****/
    </div>

    <div>
        /*****Content2****/
    </div>

    <div>
        /*****Content2****/
    </div>

    <div style="bottom:0">
        /*****Content4****/
    </div>

</div>

I am struggling to make Content1 always stay at the top and Content4 always stay at the bottom. Additionally, I want Content2 and Content3 to adjust their top and bottom margins equally so that they look evenly spaced. The issue is that the parent div has a variable height and all other divs have fixed heights.

If you need a visual reference of what I'm trying to achieve, please refer to this image:

Your assistance would be greatly appreciated,

javascript html css

Answer 1

Answer №1

Give this a shot:

http://jsfiddle.net/Q4XaQ/

<div id="main">
    <div id="content1">/*****Content1****/</div>
    <div id="content2">/*****Content2****/</div>
    <div id="content3">/*****Content3****/</div>
    <div id="bottom">/*****Content4****/</div>
</div>

#main{
    margin: 0 auto;
    width: 960px;
    background: red;
}

#content1{
    height: 80px;
    background: gray;
}

#content2{
    width:480px;
    height: 300px;
    float: left;
    background: yellow;
}

#content3{
    width:480px;
    height: 300px;
    float: right;
    background: brown;
}

#bottom{
    height: 50px;
    clear:both;
    background: blue;;
}

Answer 2

Give this a shot:

http://jsfiddle.net/Q4XaQ/

<div id="main">
    <div id="content1">/*****Content1****/</div>
    <div id="content2">/*****Content2****/</div>
    <div id="content3">/*****Content3****/</div>
    <div id="bottom">/*****Content4****/</div>
</div>

#main{
    margin: 0 auto;
    width: 960px;
    background: red;
}

#content1{
    height: 80px;
    background: gray;
}

#content2{
    width:480px;
    height: 300px;
    float: left;
    background: yellow;
}

#content3{
    width:480px;
    height: 300px;
    float: right;
    background: brown;
}

#bottom{
    height: 50px;
    clear:both;
    background: blue;;
}

creating divs inside a parent div with varying heights and using auto margins

Answer №1

Similar questions

Guide to emphasizing a specific term within a string by utilizing coordinates in javascript

Attempting to import a npm module that is not defined

Is it possible to extract a specific value from JSON data by making an AJAX call or applying a filter to the fetched JSON data?

The value of msg.member is empty following the messageReactionAdd event

Displaying an array using Javascript that contains variables along with HTML code

Tips for accurately extracting values from a decoded JSON

Guide to dynamically setting the title and background color of the navigation bar in React Navigation 5

Tips for simulating next/router in vitest for unit testing?

What is the functionality of named function expressions?

"Unlocking the JSON element with jQuery Ajax: A step-by-step guide

Tips on saving checklist values as an array within an object using AngularJS

Creating a link that triggers a submit event

Display updated text on hover over button panel

Tips for inserting a button under a div when clicked

How to Animate an Object's Rotation Gently using React Three Fiber App and Use Cannon Library?

Discovering the smallest and largest values in an object literal using JavaScript

What is the meaning of this CSS acronym?

Displaying a webpage in JavaFX Scene Builder

Steps for redirecting from a URL containing location.hash to a different page

ReactJs - Reactstrap | Issue with Jumbotron displaying background color