CSS division inside the float center division

Question

I am trying to create 3 column home layout, in which center, left and right looks fine, but I am unable to create 2 slider division inside div class middle, I actually expect slider1 should come on top, but should be inside the class middle, and slider2 after slider1 inside class middle.

As you can see here JSFIDDLE , slider2 and slider1 is not coming inside div class middle

This is my effort

HTML

<div id="content-container">
    <div class="middle">
          <div class="slider1"></div>
          <div class="slider2"></div>
   </div>
   <div class="left">
          <div></div>
          <div></div>
   </div>
   <div class="right">
          <div></div>
          <div></div>
   </div>
</div>

CSS

/* Container */
#content-container{
    background:white;
    margin-top:10px;
    margin-bottom:10px;
    height:600px;
}

/* follow container height*/
.left,.right,.middle{
    height:100%;
}

.left{
    float: left; 
    width: 23%; 
    border:1px solid red;
}
.right{
    float: right; 
    width: 23%; 
    border:1px solid red;
}
.middle{ 
     display: inline-block; 
     width: 53%; 
     border:1px solid red;
}


/* Sliders */
.slider1 { 
        height: 50px;
        border:1px solid green; 
}
.slider2 {  

        height:60px; 
        border:1px solid green;
}

Thank you

Left right and middle should all have float left, not inline-block and float right, and do you want the sliders to be next to each other or on top of each other? — Goos van den Bekerom, Nov 04 '14 at 08:28
You had several "typos": slider1 and MIDDLE not center. http://jsfiddle.net/fe8rbkwv/ — loveNoHate, Nov 04 '14 at 08:30
Sorry guys my bad still its not working, can someone explain, I really didn't understand `clear:both` in many places people usually use. — user3637224, Nov 04 '14 at 08:31
you also still have a class that is called center in your css. please fix all names before you ask your question. — Goos van den Bekerom, Nov 04 '14 at 08:32
What is not working with my solution? clear:both http://stackoverflow.com/questions/1012131/what-is-the-use-of-style-clearboth — loveNoHate, Nov 04 '14 at 08:37

score 0 · Answer 1 · answered Nov 04 '14 at 08:35

something like this? added float: left; to slider1 also you miss spelled slider1 in css

.slider1 { 
        height: 50px;
        border:1px solid blue;
        overflow: hidden;
        float: left;
        background: blue;
}

http://jsfiddle.net/fa308n2b/

score 0 · Answer 2 · answered Nov 04 '14 at 08:48

0

check your class name

.slder1 { 
        height: 50px;
        border:1px solid green; 
}

.slder1 It should be .slider1

answered Nov 04 '14 at 08:48

Mukul Kant

7,074
5
38
53

CSS division inside the float center division

2 Answers2