Why i can not split screen in two div in html? - html

Question

I want split screen only two div's for that purpose write this html code:
<div class="box">
<div class="div1">
<img src="../Content/45.png" style="width:auto;" />
</div>
<div class="div2">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div class="clear"></div>
</div>
and this is css style:
<style>
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.div1 {
background: #999;
float: left;
height: 100%;
width: 50%;
}
div.div2 {
background: #666;
height: 100%;
width:50%;
left:100px;
float:right;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
</style>
but when i run that page,i see this output:
Why i can not split screen?what is correct css?thanks.

Answer 1

Its working fine..
Check
https://jsfiddle.net/3d5mq1tf/
Please update the fiddle .. If you find something missing..
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.div1 {
background: #999;
float: left;
height: 100%;
width: 50%;
}
div.div2 {
background: #666;
height: 100%;
width:50%;
left:100px;
float:right;
}
div.clear {
clear: both;
height: 1px;
overflow: hidden;
font-size: 0pt;
margin-top: -1px;
}
<div class="box">
<div class="div1">
<img src="../Content/45.png" style="width:auto;" />
</div>
<div class="div2">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
<div class="clear"></div>
</div>

Answer 2

Your code is working up to the point where the image gets rendered, which will stretch over the bounds of your div because you don't tell it otherwise.
While the only parts you need to add are the image width ones, I took the liberty and turned this from a float-based arrangement to in inline-based one, giving you reduced markup as well as CSS, and better control over what you're doing.
div.box {
background: #EEE;
height: 100px;
width: 600px;
white-space: nowrap;
}
div.box > div {
display: inline-block;
height: 100%;
vertical-align: top;
width: 50%;
}
div.box > div img {
width: 100%;
}
.div1 {
background-color: #999;
}
.div2 {
background-color: #666;
}
<div class="box">
<div class="div1">
<img src="http://i.imgur.com/k8BtMvj.jpg" alt="test image" />
</div><div class="div2"></div>
</div>
I suspect that you also want the image to have a maximum height of 100px, as the parent container has. If you do, you could use overflow: hidden on the parent container, but you would be better off rendering it as a background image, like this:
div.box {
background: #EEE;
height: 100px;
width: 600px;
}
div.box > div {
display: inline-block;
height: 100%;
vertical-align: top;
width: 50%;
}
div.box > div img {
width: 100%;
}
.div1 {
background: #999 url('http://i.imgur.com/k8BtMvj.jpg') left top no-repeat;
background-size: cover;
}
.div2 {
background-color: #666;
}
<div class="box">
<div class="div1"></div><div class="div2"></div>
</div>
This also shows the differences in where you should use background vs background-color