HTML/CSS: Float Left

Question

I have two divs inside a div,

HTML

<div class="preview">
       <div class="gamePreview"></div>
       <div class="gameName"></div>
</div>

I would like the gameName divs to be on top of the game Preview divs.

CSS

.preview {
    display: block;
}

.gamePreview, .gameName {
    margin-left: 20px;
}

.gamePreview {
    width: 30%;
    height: 350px;
    margin-top: 40px;
    background-color: lightgrey;
    float: left;
}

.gameName {
    width: 29.59%;
    background-color: #494949;
    height: 150px;
    opacity: 0.5;
    margin-top: 240px;
    clear: both;
    position: absolute;
}

This works fine when there is only one of the preview divs. However, if I wanted to put two divs on the same line, the gameName divs all float left on the same spot. Instead, I would like each gameName div to be on top of its own gamePreview div.

https://jsfiddle.net/r5t5vuqk/

What I would like it to look like:

Make a Fiddle please.

David
– David

2015-06-17 04:03:37 +00:00
Commented Jun 17, 2015 at 4:03 — David
– David, Commented Jun 17, 2015 at 4:03
Show an image of your preferred layout.

missellorin
– missellorin

2015-06-17 04:09:59 +00:00
Commented Jun 17, 2015 at 4:09 — missellorin
– missellorin, Commented Jun 17, 2015 at 4:09

Soundar · Accepted Answer · 2015-06-17 04:20:36Z

4

Check this fiddle. I think this is what you need.

enter image description here

answered Jun 17, 2015 at 4:20

Soundar

2,5891 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Farhad Manafi · Accepted Answer · 2015-06-17 04:16:04Z

0

.preview {
    display: block;
}

.gamePreview, .gameName {
    margin-left: 20px;
}

.gamePreview {
    width: 30%;
    height: 350px;
    margin-top: 150px;
    background-color: lightgrey;
    float: left;
}

.gameName {
    width: 29.59%;
    background-color: #494949;
    height: 150px;
    opacity: 0.5;
    margin-top: -10px;
    clear: both;
    position: absolute;
}

answered Jun 17, 2015 at 4:16

Farhad Manafi

3341 gold badge8 silver badges18 bronze badges

Comments

Bhupendra Shukla · Accepted Answer · 2015-06-17 04:22:51Z

0

Check this fiddle. FIDDLE

.preview {
   display: block;
    float: left;
    margin: 5px;
    width: 30%;
}

.gamePreview, .gameName {
    margin-left: 20px;
}

.gamePreview {
   background-color: lightgrey;
    float: left;
    height: 350px;
    margin-top: 40px;
    width: 100%;
}

.gameName {
    background-color: #494949;
    clear: both;
    height: 150px;
    margin-top: 240px;
    opacity: 0.5;
    width: 100%;
}

answered Jun 17, 2015 at 4:22

Bhupendra Shukla

3,9146 gold badges43 silver badges62 bronze badges

Collectives™ on Stack Overflow

HTML/CSS: Float Left

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related