Sent by Gergely Buday on 16 July 2012 16:04
Hi there,
the following html/css code works, a gray line appears on the left and right:
<html>
<head>
<style type="text/css" media=screen>
<!--
div#container { width: 800px;
margin-left: auto;
margin-right: auto; }
div#headline {
font-size : 72px;
text-align : center;
margin-bottom: 10px; }
div#subheader {
width: 740px;
font-size: 24px;
text-align: center;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
border-top: 1px solid #000 ;
border-bottom: 1px solid #000 ; }
div#main {
padding-left: 29px;
padding-right: 29px;
font-family: 'Didact Gothic';
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin-bottom: 40px; }
div#text { width: 600px; }
div#sidebar { width: 120px;
margin-left: 20px; }
-->
</style>
</head>
<body>
<div id="container">
<div id="headline">LOREM IPSUM</div>
<div id="subheader">IPSUM LOREM</div>
<div id="main">
<div id="text">
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
<div id="sidebar">
<p>lorem</p>
<p>ipsum</p>
<p>lorem</p>
<p>ipsum</p>
<p>lorem</p>
<p>ipsum</p>
<p>lorem</p>
<p>ipsum</p>
</div>
</div>
</div>
</body>
</html>
Now, if I use float at div#text and div#sidebar the sidebar column
goes to the right of the text colum (good), but the gray borders
disappear (bad):
--- noborder.html 2012-07-16 17:08:06.965217695 +0200
+++ noborder_bad.html 2012-07-16 17:11:06.047341839 +0200
@@ -30,9 +30,11 @@
border-right: 1px solid #ccc;
margin-bottom: 40px; }
- div#text { width: 600px; }
+ div#text { width: 600px;
+ float: left; }
div#sidebar { width: 120px;
+ float: right;
margin-left: 20px; }
-->
1px border + 29px padding + 600px text + 20px margin-left + 120px
sidebar + 29px padding + 1px border is 800px, so in theory it works.
Or is this not the problem?
- Gergely
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
