PDA

View Full Version : liquid layout


tony09uk
09-26-2011, 11:51 PM
I am trying to create a combination fixed/liquid layout for the first time and am having a bit of trouble.

The code is this:

HTML

<div class="sidebar1"></div>
<div class="content">
<div class="video"> <img src="" alt="Video place holder" name="Video" width="560" height="372" />
<!-- end video --></div>
<div class="text"> <img name="Place holder text" src="" width="560" height="500" alt="Tutorial text place holder" />
<!-- end text --></div>
<!-- end .content --></div>
<div class="sidebar2"><img src="../images/tempAd_04.jpg" width="160" height="600" alt="tempAdRight" />
<!-- end .sidebar2 --></div>

CSS

.sidebar1 {
float: left;
width: 20%;
background: #93A5C4;
padding-bottom: 5px;
}
.content {
width: auto;
padding-top: 5px;
float: left;
}
.container .content .video {
height: 100%;
width: 100%;
}
.container .content .text {
height: 100%;
width: 100%;
}

.sidebar2 {
float: right;
width: auto;
padding: 5px;
}

I would like my container to sit in the middle of sidebar1 and sidebar2. I have tried auto margins and have looked round google a few ideas and the Display in-line seems to pop up a lot, but I can't seem to make it work for me :(

edbr
09-27-2011, 01:08 AM
i think
you are wanting to do this wrapped with container div and gace text a class but you need to add your own attributes


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<style type="text/css">

.sidebar1 {
float: left;
width: 20%;
background: #93A5C4;
padding-bottom: 5px; position:relative;
}
.content {
width: auto;
padding-top: 5px;
float: left; position:relative;
}
.container .content .video {
height: 100%;
width: 100%;
}
.container .content .text {
height: 100%;
width: 100%;
}

.sidebar2 { position:relative;
float: right;
width: auto;
padding: 5px;
}
.text{ width:auto:

</style>
</head>

<body>
<div class="container">
<div class="sidebar1">sidebar1</div>
<div class="content">
<div class="video"> <img src="" alt="Video place holder" name="Video" width="560" height="372" />
<!-- end video --></div>
<div class="text"> <img name="Place holder text" src="" width="560" height="500" alt="Tutorial text place holder" />
<!-- end text --></div>
<!-- end .content --></div>
<div class="sidebar2"><img src="../images/tempAd_04.jpg" width="160" height="600" alt="tempAdRight" />
<!-- end .sidebar2 --></div>
</div>



</body>
</html>