CODEWITHSUNDEEP
css
Gert Cuykens
Gert Cuykens

Reputation: 7155

float left or auto margin if smaller then min-width

This wraps my div boxes in 2 columns

.box {
   float:left;
   height: 300px;
   min-width: 800px;
   width:50%;
   margin: 0px auto; /* <= do this when smaller then 800px ? */
}

But how can I tell the browser to center the boxes (margin: 0px auto;) when only one column of boxes fit on the screen width. Now the box is aligned to the left of the screen.

Upvotes: 1

Views: 228

Answers (2)

loveNoHate
loveNoHate

Reputation: 1547

You already had it not working with float:left for two or one.

Here the code that works:

HTML

<div style="text-align:center">
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS

.box {
    display:inline-block;     
    height: 300px;
    min-width: 800px;
    width:50%;
    background:yellow;
}

JSFIDDLE.

The text-align:center you need on the parent element, since margin:0 auto does not work for inline-block elements.

Upvotes: 2

D&#225;vid Horv&#225;th
D&#225;vid Horv&#225;th

Reputation: 4320

Not entirely clear what you want.

You can use media queries to handle different screen width states:

@media all and (max-width: 799px) {

    .box {
        float: left;
    }

}

@media all and  (min-width: 800px) {

    .box {
        margin-left: auto;
        margin-right: auto;
    }

}

Upvotes: 3

Related Questions