Aligning a DIV Beside one and Under another

Question

Aligning a DIV Beside one and Under another

87 views Asked by Hayley McNicol At 15 September 2024 at 12:10

I'm trying to aligning DIVs for a webpage.

The section I'm trying to create at the moment consists of three DIVs within a DIV. I have one aligned to the left and I was hoping to aligning the other two to the right, under eachother. (As below)

3 DIVS- How they should look! I have managed to align the DIV to the right and the top DIV to the left. I am having a bit of difficulty getting the third image beside the first AND under the second.

This is the Code I have so far!

.womenOne{
    width: 383px;
    height: 634px;
    background-image:url(../images/woman1.jpg);
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom:20px;
}

.womenTwo{
    width: 780px;
    height: 296px;
    margin-right: 10px;
    margin-bottom: 21px;
    display: inline-block;
    background-image:url(../images/woman3.jpg);
}

.womenThree{
    width: 780px;
    height: 321px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-top: 21px;
    display: inline-block;
    background-image: url(../images/woman2.jpg);
    float: right;
}

<html>
  <head>
  </head>
   
  <body>
            <!-- WOMEN -->
            <h2> women </h2>
            <div class="women">
                <div class="womenOne">
                    <p> On Trend </p>
                </div>
                
                <div class="womenTwo">
                    <p> Winter Wonderful </p>
                </div>
                
                <div class="womenThree" float="left">
                    <p> Winter Sun Essentials </p>
                </div>
            </div>
    </body>
  </html>

Any help on how to fix this problem would be great!

Original Q&A

There are 1 answers

**DominicValenciana** · Answer 1 · 2016-12-27 19:21:53

Float all elements for better managment of content

By making the second and third element float:right, the first float:left and the the third clear: right I managed to stacked the divs and you had been looking for.

Bellow is a working example using your code supplied.

div {
 border:solid 1px black;
}
.womenOne{
    width: 383px;
    height: 634px;
    background-image:url(../images/woman1.jpg);
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom:20px;
    float: left;
}

.womenTwo{
    width: 780px;
    height: 296px;
    margin-right: 10px;
    margin-bottom: 21px;
    display: inline-block;
    background-image:url(../images/woman3.jpg);
    float: right;
}

.womenThree{
    width: 780px;
    height: 321px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-top: 21px;
    display: inline-block;
    background-image: url(../images/woman2.jpg);
    float: right;
    clear:right;
}

<html>
  <head>
  </head>
   
  <body>
            <!-- WOMEN -->
            <h2> women </h2>
            <div class="women">
                <div class="womenOne">
                    <p> On Trend </p>
                </div>
                
                <div class="womenTwo">
                    <p> Winter Wonderful </p>
                </div>
                
                <div class="womenThree" float="left">
                    <p> Winter Sun Essentials </p>
                </div>
            </div>
    </body>
  </html>

TechQA.

Aligning a DIV Beside one and Under another

There are 1 answers

Float all elements for better managment of content

Related Questions in HTML

Related Questions in CSS

Related Questions in ALIGNMENT

Related Questions in DIVIDE

Related Questions in ADOBE-BRACKETS

Popular Questions

Popular Tags

Trending Questions