Arranging Div Elements in a Specific Layout

Question

Arranging Div Elements in a Specific Layout

I am currently experimenting with http://jsfiddle.net/ngZdg/

My main goal is to create a parallax website, but I am facing some challenges with the initial layout. I am aiming for the following design:

-------------------------------------
|                                    |
|                                    |
|           ______  ______           |
|           |       |     |          |
|           |       |     |          |
|           ______  ______           |
|                   |     |          |
|                   |     |          |
|                   ______           |
|                                    |
-------------------------------------

Does anyone have any suggestions?

html css

Answer 1

Answer №1

Check out this link:

@charset"utf-8";
 #main {
    background-color:pink;
    width:1280px;
    height:100%;
    position:absolute;
}
#chapter1 {
    background: blue;
    width:90%;
    height:90%;
}
#chapter1_1 {
    background-color:red;
    width:100px;
    height:100px;
    left:100px;
    top:50px;
    position:absolute;    
}
#chapter1_2 {
    background-color:yellow;
    width:100px;
    height:100px;
    left:205px;
    top:50px;
    position:absolute;
}
#chapter1_3 {
    background-color:green;
    width:100px;
    height:100px;
    top:155px;
    left:205px;
    position: absolute;
}

Don't forget to properly close your <DIV> tags.

<div class="whatever" />

Remember, it should be like this:

<div class="whatever"></div>

Answer 2

Check out this link:

@charset"utf-8";
 #main {
    background-color:pink;
    width:1280px;
    height:100%;
    position:absolute;
}
#chapter1 {
    background: blue;
    width:90%;
    height:90%;
}
#chapter1_1 {
    background-color:red;
    width:100px;
    height:100px;
    left:100px;
    top:50px;
    position:absolute;    
}
#chapter1_2 {
    background-color:yellow;
    width:100px;
    height:100px;
    left:205px;
    top:50px;
    position:absolute;
}
#chapter1_3 {
    background-color:green;
    width:100px;
    height:100px;
    top:155px;
    left:205px;
    position: absolute;
}

Don't forget to properly close your <DIV> tags.

<div class="whatever" />

Remember, it should be like this:

<div class="whatever"></div>

Answer 3

Answer №2

Your closure of the div tags in the fiddle was incorrect, resulting in a layout similar to your diagram.

<div id="main">
    <div id="chapter1">
        <div id="chapter1_1"></div>
        <div id="chapter1_2"></div>
        <div id="chapter1_3"></div>
    </div>
</div>

CSS:

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
} 
#main {
    background-color:#00FF00;
    width:100%;
    height:100%;
    /*position:absolute;
    left:50%;
    margin-left:-640px;*/
}
#chapter1 {
    background: blue;
    height:100%;
    position:relative;
    width:100%
}
#chapter1_1,
#chapter1_2,
#chapter1_3 {
    height:20%;
    width:20%;
    position:absolute;
}
#chapter1_1 {
    background-color:red;
    top:10%;
    left:30%;    
}
#chapter1_2 {
    background-color:yellow;
    left:50%;
    top:10%;
}
#chapter1_3 {
    background-color:green;
    top:30%;
    left:50%;
}

Answer 4

Your closure of the div tags in the fiddle was incorrect, resulting in a layout similar to your diagram.

<div id="main">
    <div id="chapter1">
        <div id="chapter1_1"></div>
        <div id="chapter1_2"></div>
        <div id="chapter1_3"></div>
    </div>
</div>

CSS:

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
} 
#main {
    background-color:#00FF00;
    width:100%;
    height:100%;
    /*position:absolute;
    left:50%;
    margin-left:-640px;*/
}
#chapter1 {
    background: blue;
    height:100%;
    position:relative;
    width:100%
}
#chapter1_1,
#chapter1_2,
#chapter1_3 {
    height:20%;
    width:20%;
    position:absolute;
}
#chapter1_1 {
    background-color:red;
    top:10%;
    left:30%;    
}
#chapter1_2 {
    background-color:yellow;
    left:50%;
    top:10%;
}
#chapter1_3 {
    background-color:green;
    top:30%;
    left:50%;
}

Answer 5

Answer №3

Just made some updates to the fiddle - changed the background to absolute and adjusted the positions of other divs accordingly

If you want to check it out, here's the link: http://jsfiddle.net/MarmeeK/ngZdg/19/

This is how the CSS looks:

@charset"utf-8";
 #main {
    background:pink;
    width:1280px;
    height:900px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    margin:0;
    padding:0;
}
#chapter1 {
    margin:100px auto 100px auto;
    background: blue;
    height:500px;
    width:800px;
    padding:100px;
}
#chapter1_1, #chapter1_2, #chapter1_3 {
    width:200px;
    height:200px;
    position:relative;
    display:block;
    margin:0;
    padding:0;
    float:left;
}
#chapter1_1 {
    background-color:red;
    left:100px;
}
#chapter1_2 {
    background-color:yellow;
    left:100px;
}
#chapter1_3 {
    clear:both;// to clear the float to next line.
    background-color:green;
    left:300px;
}

I believe this should work perfectly now! :)

Answer 6

Just made some updates to the fiddle - changed the background to absolute and adjusted the positions of other divs accordingly

If you want to check it out, here's the link: http://jsfiddle.net/MarmeeK/ngZdg/19/

This is how the CSS looks:

@charset"utf-8";
 #main {
    background:pink;
    width:1280px;
    height:900px;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    margin:0;
    padding:0;
}
#chapter1 {
    margin:100px auto 100px auto;
    background: blue;
    height:500px;
    width:800px;
    padding:100px;
}
#chapter1_1, #chapter1_2, #chapter1_3 {
    width:200px;
    height:200px;
    position:relative;
    display:block;
    margin:0;
    padding:0;
    float:left;
}
#chapter1_1 {
    background-color:red;
    left:100px;
}
#chapter1_2 {
    background-color:yellow;
    left:100px;
}
#chapter1_3 {
    clear:both;// to clear the float to next line.
    background-color:green;
    left:300px;
}

I believe this should work perfectly now! :)

Arranging Div Elements in a Specific Layout

Answer №1

Answer №2

Answer №3

Similar questions

Changing the background color completely

Adjust Element Width Based on Scroll Position

Explanation on subtracting the row value from a textbox

A single Modal, Ajax, and data that is continuously refreshed

What can be done to prevent divs from overlapping? They display properly on a computer browser, but not on mobile devices like phones or tablets

Trying to display logo using 'content' property in CSS

Apply SetTimeout exclusively for desktop devices

Create a dynamic design with Angular Material's mat-drawer at full height using flexbox, allowing content

Can you explain the significance of this %s value?

Is it important to position elements based solely on the parent container?

Reposition picture "overlays" additional HTML components

Can text be replaced without using a selector?

Spacing between Div tags

Update the appearance of a cell if the value within it is equal to zero

Using Geolocation in HTML5 and JavaScript

Center the span element within Bootstrap 5 button groups

Choosing HTML Elements for Audio Playback in HTML5: A Guide to Selecting Elements Without Using Div IDs

What is the best way to utilize JSONP to display an entire HTML code with an alert?

Leveraging ternary operators within HTML elements

Instructions for implementing tooltips on a pie chart slice when hovering with the mouse pointer, using the canvas