CODEWITHSUNDEEP
htmlcss
WhiteLine
WhiteLine

Reputation: 1989

Create div with two divs inside that need to stay centered

I'm making a web site responsive, and on the home page I should insert two "containers" that should be centered and aligned. (containers in this case are two divs with inside images and text)

I wish they would behave in this way

and when the page is "restricted", the two divs should position itself in this way

I tried like this, but it is not exactly what I would get

<div style="">
     <div style="width: 300px;float: left;">
        div 1
     </div>

     <div style="width: 300px;float: left;">
        div 2
     </div>
</div>

Upvotes: 0

Views: 106

Answers (3)

Alexandra
Alexandra

Reputation: 1146

I'd try to use display: inline-block property. In this way you don't have to apply 'overflow' for parent and it's pretty easy to make blocks centered.

HTML:

<div class="wrapper">
    <div class="box">Div 1</div>
    <div class="box">Div 2</div>
</div>

CSS:

.wrapper {
    text-align: center;

    /* Just decoration */
    border: 1px solid blue;
    padding: 20px;
}
.wrapper .box {
    display: inline-block;
    width: 300px;
    height: 50px;

    /* Just decoration */
    border: 1px solid green;
}

Take a look at the fiddle http://jsfiddle.net/caprella/y4BQ3/

Upvotes: 2

user2012084
user2012084

Reputation:

Check out this Fiddle. There's only a few simple changes to your existing code, which I included below. http://jsfiddle.net/ArKKG/

<div style="overflow:auto; height: 100% text-align: center;">
    <div style="width: 300px; height: 50px;float: left;">
       div 1
    </div>

    <div style="width: 300px;height: 50px;float: left;">
       div 2
    </div>
</div>

And some CSS to make them visible, and keep the borders separated.

div{
    border: 1px solid black;
    margin: 4px;
}

Upvotes: 0

codedude
codedude

Reputation: 6549

I put something quick together for you. You will have to use media queries to find the size of the page when you want the style to switch. Mess around with my example and you should be able to figure something out to your liking.

<div id="box">
     <div class="innerBox">
        div 1
     </div>

     <div class="innerBox">
        div 2
     </div>
    <div class="clear"></div>
</div>

And the CSS...

#box {
    width:88%;
    background:red;
    padding:20px 6%;
}
.clear{clear:both}
.innerBox {
    width:41%;
    float:left;
    background:blue;
    display:block;
}
.innerBox:first-child {
    margin-right:18%;
}
@media screen and (max-width: 400px) {
    #box .innerBox {
        float:none;
        width:100%;
        margin:20px 0 0 0;
    }    
    #box .innerBox:first-child {
        margin-top:0;
    }
}
  }

JsFIddle link: http://jsfiddle.net/x3JLX/

Upvotes: 1

Related Questions