यह IE 7, FF 3.5, Chrome 3b, Safari 4 (Windows) में मेरे लिए काम करता है।
IE 6 में भी काम करता है यदि आप निचले भाग में क्लियर डिव को अनफॉलो करते हैं।
संपादित करें : के रूप में नेटली Downe ने कहा, आप बस जोड़ सकते हैं width: 100%;
करने के लिए #container
के बजाय।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
#container {
overflow: hidden;
border: 1px solid black;
background-color: red;
}
#left-col {
float: left;
width: 50%;
background-color: white;
}
#right-col {
float: left;
width: 50%;
margin-right: -1px; /* Thank you IE */
}
</style>
</head>
<body>
<div id='container'>
<div id='left-col'>
Test content<br />
longer
</div>
<div id='right-col'>
Test content
</div>
<!--div style='clear: both;'></div-->
</div>
</body>
</html>
अगर सही निश्चित ऊंचाई नहीं है, तो मुझे सही div में टेक्स्ट को वर्टिकल सेंटर करने का CSS तरीका नहीं पता है। यदि यह है, तो आप line-height
div ऊँचाई के समान मान सेट कर सकते हैं और अपने पाठ वाले आंतरिक div को लगा सकते हैं display: inline; line-height: 110%
।