Menu
Beginner page building question:
I've got a simple /div container defined via a CSS style called "content_bottom" like such:
border-top: 5pt solid #f4f4f4;
padding: 10pt;
border-collapse: separate;
text-align: left;
When I start typing text in it I noticed that the text starts touching the very left edge of the box. I tried to add padding and even borders (via the CSS style) to the container, but there was no effect. However, adding top/bottom borders DID have an effect. Why is this? What should I do so that the text would not start touching the very left (and top) of the box? Thanks.
P.S. This is the full HTML for the page:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>site title goes here</title>
<link rel="stylesheet" href="penonek.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="column_top">this <br>
</div>
<div class="content_top">is site title<br>
</div>
<div class="column_bottom">
<ul>
<li>home</li>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3<br>
</a></li>
</ul>
</div>
<div class="content_bottom">this is the container's content<br>
</div>
</div>
</body>
</html>
Here is the full CSS:
body {
margin: 0;
padding: 0;
text-align: center;
background-color: black;
font-family: Arial,Helvetica,sans-serif;
color: #cccccc;
font-size: 16pt;
}
.wrapper {
margin: auto;
min-width: 900pt;
font-family: Arial,Helvetica,sans-serif;
width: 900pt;
color: #cccccc;
}
.column_top {
border-width: 0 0 5pt;
border-bottom: 5pt solid black;
min-width: 150pt;
color: #333333;
width: 150pt;
max-width: 150pt;
background-color: #f4f4f4;
float: left;
min-height: 45pt;
max-height: 45pt;
height: 45pt;
padding-top: 105pt;
font-size: 40pt;
text-align: right;
font-weight: bold;
}
.content_top {
border-width: 0 0 5pt;
border-bottom: 5pt solid #f4f4f4;
height: 45pt;
min-height: 45pt;
max-height: 45pt;
padding-top: 105pt;
text-align: left;
font-size: 40pt;
font-weight: bold;
}
.column_bottom {
border-width: 5pt 0 0;
border-top: 5pt solid black;
color: #333333;
background-color: #f4f4f4;
width: 145pt;
min-width: 145pt;
max-width: 145pt;
text-align: right;
padding-top: 50pt;
padding-right: 5pt;
float: left;
}
.content_bottom {
border-top: 5pt solid #f4f4f4;
padding: 10pt;
border-collapse: separate;
text-align: left;
}
.column_bottom ul {
margin: 0;
padding: 0;
font-weight: inherit;
color: #333333;
list-style-type: none;
text-decoration: none;
}
.column_bottom a:hover {
background-color: #999999;
}
.column_bottom a {
text-decoration: none;
font-weight: inherit;
color: #333333;
}
630
Your html and css work so there must be a typo somewhere in your css file that causes it to be not used.
Everything is working as it should. Your problem is that the padding of the box is behind the left-floated nav-bar, your box is really 100% wide although part is hidden behind the bottom nav.
You can solve your problem by floating the .content_bottom container left as well.
You will need to make some additional changes for the borders, but you can do that in the top section so that you only have one horizontal border instead of 2 touching borders with the same colour.
See here for a working example.
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
