CODEWITHSUNDEEP
htmlcssresponsive-design
Ivy
Ivy

Reputation: 2305

Simple responsive with two boxes?

I have the following example : http://jsfiddle.net/dwDZx/10/

html

<div id="container">
    <div id="div1" class="regularContainer">
        <div>one</div>
    </div>
    <div id="div2" class="regularContainer">
        <div>two</div>
    </div>
</div>​

css

* {
  margin:0;
  padding:0;
}

#div1 {
  float:left;
  margin-right:2%;
  margin-bottom:10px;
  max-width:300px;
  width:47%;
  background-color:#d3edff;
  border-color:#00b5ff;
  padding-bottom:8px;
}

#div2 {
  float:left;
  max-width:300px;
  width:47%;
}

.regularContainer {
  float:left;
  padding:7px;
  background-color:#fff;
  border:1px solid #00b5ff;
  width:784px;
}

​ The problem is that the boxes is not resizing until the second box fals down a row? What I need is the boxes to resize always and never fall down a row.

How can this be done?

Upvotes: 2

Views: 1536

Answers (2)

Codler
Codler

Reputation: 11256

Only use percent and it will become responsive.

here is the responsive http://jsfiddle.net/dwDZx/11/

I changed width to 45% and padding to 1% from your previous

* { margin: 0; padding: 0; }

#div1
{
    float:              left;
    margin-right:       2%;         
    margin-bottom:      10px;
    max-width:          300px;
    width:              45%;
    background-color:   #d3edff;
    border-color:       #00b5ff;
    padding-bottom:     8px;
}

#div2
{
    float:              left;
    max-width:          300px;
    width:              45%; 
}

.regularContainer
{
    float:                      left;
    padding:                    1%;
    background-color:           #ffffff;
    border:                     1px solid #00b5ff;
    width:                      784px;
}

​

Upvotes: 2

asgoth
asgoth

Reputation: 35829

Why dont you just use Twitter Bootstrap? It is great for responsive design. It has classes like container-fluid, row-fluid, spanxx, which will solve your problem.

Upvotes: 1

Related Questions