- This topic is empty.
-
As a CSS novice, I’d be grateful for some advice with one thing which really has stumped me.
I’m rather lost when dealing with columns in containers. I’ve read and tried a number of things re. floats / overflow:auto etc. but this particular code has given me a headache.
The code below was influenced by as I like this part of the layout.
Thanks for any help.
Paul
/* CSS Document */
body,
html {
margin:0 ;
padding:0;
}
#container
{
width:960px;
height:auto;
margin:25px auto;
border:3px solid #DBDBDB;
position:relative;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
overflow:hidden;
}
.clear {
clear: both;
}
/*************************************************************
NAVIGATION
**************************************************************/
#navcontainer
{
width:450px;
font-family: Garamond, "Palatino Linotype", Georgia;
margin-top:10px;
margin-left: auto;
margin-right:auto;
padding:0px;
text-align:right;
border-top:1px solid #DBDBDB;
border-bottom:1px solid #DBDBDB;
}
#nav
{
text-align:center;
padding: 10px;
margin-top: 1px;
float: left;
}
#navlist
{
width:100%;
text-align:right;
margin-left: auto;
margin-right:auto;
padding: 0px;
text-indent: 0px;
list-style-type: none;
word-spacing:2px;
}
#navlist li
{
padding-left:2px;
padding-right:2px;
margin: 0;
text-indent: 0;
text-align: center;
display: inline;
}
#navlist li a
{
letter-spacing: 2px;
text-decoration: none;
color:#000048;
font-size: 12px;
padding: 0 2px;
letter-spacing:2px;
word-spacing:1px;
}
#navlist li a:hover,#navlist a#current
{
color:#9AB6F5;
font-size: 12px;
}
#navlist a#current
{
color:#9AB6F5;
font-family: Garamond, "Palatino Linotype", Georgia;
font-size: 12px;
}
/*************************************************************
end of NAVIGATION
**************************************************************/
.h1 {
color: #999999;
font-family: Garamond, "Palatino Linotype", Georgia;
font-size: 56px;
margin-top:-500px;
margin-left:34px;
position:absolute;
}
.h2
{
color: #0066FF;
font-family: Garamond, "Palatino Linotype", Georgia;
font-size: 32px;
font-weight:500;
padding-left:22px;
margin-top:-477px;
margin-left:525px;
position:absolute;
font-style: italic;
}
p.italic
{
font-family:"Lucida Handwriting";
font-size:14px;
color:#666666;
margin-left:175px;
margin-top:300px;
}
#aboutme
{
width:950px;
font-family: Garamond, "Palatino Linotype", Georgia;
font-size: 16px;
color:#666666;
margin-top:-430px;
margin-left:175px;
margin-right:25px;
border:6px solid 000000;
float:left;
}
.mod_wrapper .body {
margin: 10px 0px 0px 5px;
}
.mod_wrapper {
width:940px;
margin-left: 160px;
margin-right: 0px;
margin-top:-300px;
float:left;
background-color:#DBFCAD;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
.mod_3 {
font-family:Garamond, "Palatino Linotype", Georgia;
font-size:15px;
color:#333333;
border-right-color: #AEFB46;
border-right-style: dotted;
border-right-width: 2px;
height: 380px;
margin-right: 5px;
padding-right: 4px;
padding-left:2px;
width: 300px;
float: left;
}
"http://www.w3.org/TR/html4/loose.dtd">
Untitled Document
MICHAEL SMITH
elegant and timeless interior designs
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- The forum ‘CSS’ is closed to new topics and replies.