CODEWITHSUNDEEP
htmlcss
defiant
defiant

Reputation: 3341

2 Boxes inside a box in CSS

I would like some one to provide me with a valid css which can put 2 Boxes inside a box. like in the image I have given

This is what I want it to look like CSS

<style type="text/css">
            #adbox {
                width: 602px;
                height: 250px;
                border-width: 0;
                border-color: red;
            }
            #adbox .adbox1 {
                width: 300px;
                height: 250px;
                border-width: 0;
                border-color: red;
                }
            #adbox .adbox2 {
                width: 300px;
                height: 250px;
                border-width: 0;
                border-color: red;
        }
    </style>

HTML

<div align=center><div id="adbox">
<div class="adbox1">
<img src="foobar1.jpg" border="0" />
</div>
<div class="adbox2">
<img src="foobar.jpg" border="0" />
</div>
</div></div>

Upvotes: 0

Views: 20710

Answers (2)

Pavan
Pavan

Reputation: 4329

Well..You didn't ask the question....I am assuming that you want to place the two boxes side by side and I am providing answer based on my assumption. Change your html and css as below if you want to place the two boxes side by side

Also note the usage of "clear" class which clears the floats

html

<div align=center><div id="adbox"> 
<div class="adbox1"> 
<img src="foobar1.jpg" border="0" /> 
</div> 
<div class="adbox2"> 
<img src="foobar.jpg" border="0" /> 
</div> 
<div class="clear"/>
</div></div>

CSS

#adbox {   
            width: 602px;   
            height: 250px;   
            border-width: 0;   
            border-color: red;   
        }   
        #adbox .adbox1 {   
            width: 300px;   
            height: 250px;   
            border-width: 0;   
            border-color: red;  
            float:left; 
            }   
        #adbox .adbox2 {   
            width: 300px;   
            height: 250px;   
            border-width: 0;   
            border-color: red;   
            float:left;
    }   
    .clear{
         clear:both;
    }

Upvotes: 1

Nico
Nico

Reputation: 1326

I'm going to guess that you want to align the boxes like in the image you provided.

You can do this with this css:

#adbox {
  width: 600px;
  height: 250px;
  border: 1px red solid;
}

#adbox .adbox1, #adbox .adbox2 {
  width: 300px;
  height: 250px;
  float: left;
  outline: 1px red solid;
}

Example: http://tinkerbin.com/5MAX3Mt2

Upvotes: 5

Related Questions