SitePoint Sponsor |
|
User Tag List
Results 1 to 17 of 17
Thread: 2 column layout
-
Sep 2, 2007, 14:40 #1
- Join Date
- Aug 2007
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
2 column layout
hi,
I'm having a bit of trouble with my first site in css. i cant seem to align the content side by in the main section. This section uses Horizontal scrolling, which is causing some probs- if i switch to absolute positioning the scroll bar goes through the header and if i use relative i get 2 scroll bars. i would really appreciate any help or pointers?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>3 col layout with equalising columns and footer</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html, body {height:100%}
body {
padding:0;
margin:0;
background:000000;
color: #000000;
font family: courier;
font size: 8px;
}
#outer{
height:100%;
min-height:100%;
margin-left:216px;
background:#ffffff;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color: #000000;
}
html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
background:#ffffff;
border-top:1px solid #000;
border-bottom:1px solid #000;
overflow:hidden;
color: #000000;
}
#contentcontainer{
position:relative;
top:0px;
margin-left:0px;
margin-top:0px;
width:100%;
height:500px;
background:#ffffff;
border-top:none;
border-bottom:1px solid #000;
overflow:scroll;
float:right;
color: #000000;
padding-left:0px;
}
/* divs for main content-------------------------------*/
#threediv1{
position:relative;
top:0px;
left:0px;
width:100%;
height:405px;
background:#ffffff;
border-top:none;
overflow:hidden;
color: #000000;
}
#threediv2{
position:relative;
top:0px;
left:740px;
width:100%;
height:405px;
background:#ffffff;
border-top:none;
overflow:hidden;
float:right;
color: #000000;
align:top
}
/*end of divs for main content------------------------------*/
#topnavcontainer{
position:relative;
top:10px;
left:220px;
width:100%;
height:90px;
background:#ffffff;
border-top:none;
overflow:hidden;
color: #000000;
}
#topnavcontainer1{
position:absolute;
top:40px;
left:220px;
width:100%;
height:90px;
background:#ffffff;
border-top:none;
border-bottom:none;
overflow:hidden;
color: #000000;
}
/* special */
* { padding: 0em; margin: 0em; }
/* ----------------------------- start #topnav ----------------------------- */
#topnav {position:absolute;}
#topnav img { border: 0px;}
#topnav li { display: inline; list-style:none; }
#topnav li a { float: left; display:block; width: 180px; height: 16px; margin: 0%;}
#topnav li a img { border:none; vertical-align:bottom; /* for IE6 */}
#topnav li a:hover { visibility:visible; }
#topnav li a:hover img { visibility:visible; }
#topnav li a:hover img/**/ { visibility:hidden; /* hide from IE5.0/win */}
/* ----------------------------- end #topnav ----------------------------- */
/* ----------------------------- start #topnav ids ----------------------------- */
#one { background:url(img/top_nav/menu_seehear_02.gif) no-repeat left bottom; }
#two { background:url(img/top_nav/menu_profile_02.gif) no-repeat left bottom; }
#three { background:url(img/top_nav/menu_contact_02.gif) no-repeat left bottom; }
#four { background:url(img/top_nav/menu_clients_02.gif) no-repeat left bottom; }
#five { background:url(img/top_nav/menu_resonate_02.gif) no-repeat left bottom; }
#six { background:url(img/top_nav/menu_friends_02.gif) no-repeat left bottom; }
/* ----------------------------- end #nav ids ----------------------------- */
.logo{
position:absolute;
top:3px;
left:25px;
}
#left {
position:relative;/*ie needs this to show float */
width:160px;
float:left;
border-left:0px solid #000;
margin-left:-159px;/*must be 1px less than width otherwise won't push footer down */
padding-top:82px;/*needed to make room for header*/
}
#left p {padding-left:3px;padding-right:2px}
#left a{
font-family: Courier New, Courier, monospace;
font-size: 12px;
color: #666666;
text-decoration:none;
}
#left ul {
list-style: none;
text-decoration:none;
margin: 10px;
padding: 0px;
}
#left li {
border-bottom: 0px solid #ED9F9F;
font-weight:none;
text-decoration:none;
}
#left li :hover
{
font-weight:none;
text-decoration:none;
/* border-color:blue;*/
background-color:#0000ff;
color:#000000;
}
#left li:active
{
font-weight:none;
text-decoration:none;
background-color:#0000ff;
color:000000;
}
#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #FFFFFF;
color: #000000;
text-align:center;
position:relative;
}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
div,p {margin-top:0}/*clear top margin for mozilla*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
</style></head><body>
<div id="outer">
<div id="left">
<ul>
<li><a href="index.htm">Sketch</a></li>
<li><a href="#">Fiat</a></li>
<li><a href="#">Shelter</a></li>
<li><a href="#">Stiff Records</a></li>
<li><a href="#">3 Mobile</a></li>
<li><a href="#">Canon</a></li>
<li><a href="#">Simple Records</a></li>
<li><a href="#">One&Only Resorts</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">Adidas</a></li>
<li><a href="#">Ogilvy</a></li>
<li><a href="#">BBC</a></li>
<li><a href="#">Kaupthing</a></li>
<li><a href="#">Cobra</a></li>
<li><a href="#">Havana Club</a></li><br></br>
<li><a href="#">Audio-visual<br>performance</a></br></li>
</ul>
</div>
<div id="clearheader"></div> <!-- to clear header -->
<div id="centrecontent"><!--centre content goes here -->
<div id="contentcontainer">
<div id="threediv1">
<img src="img/three/1.jpg">
</div>
<div id="threediv2">
<img src="img/three/2.jpg">
</div>
</div>
<div id="clearfooter"></div> <!-- to clear footer -->
</div><!-- end outer div -->
<div id="footer">Footer - | <a href="http://www.pmob.co.uk/temp/2colfixedtest_3.htm">Left column longest</a>
| <a href="http://www.pmob.co.uk/temp/2colfixedtest_2.htm">Centre column longest</a> | <a href="http://www.pmob.co.uk/temp/2colfixedtest_4.htm">No
Column Longest</a> | - Footer
<p></p>
</div>
<div id="header">
<div class="logo">
<img src="img/top_nav/logo_silentstudios.gif" width="191" height="23">
</div>
<!-- open nav -->
<div id="topnav">
<div id="topnavcontainer">
<ul><li>
<a title="" href="#" id="one">
<img src="img/top_nav/menu_seehear_01.gif" alt=""></a>
</li>
<li>
<a title="" href="#" id="two">
<img src="img/top_nav/menu_profile_01.gif" alt=""></a>
</li>
<li>
<a title="" href="#" id="three">
<img src="img/top_nav/menu_contact_01.gif" alt=""></a>
</li>
</div>
<div id="topnavcontainer1">
<li>
<a title="" href="#" id="four">
<img src="img/top_nav/menu_clients_01.gif" alt=""></a>
</li>
<li>
<a title="" href="#" id="five">
<img src="img/top_nav/menu_resonate_01.gif" alt=""></a>
</li>
<li>
<a title="" href="#" id="six">
<img src="img/top_nav/menu_friends_01.gif" alt=""></a>
</li>
</ul>
</div>
<!-- close nav --></div>
</div>
</body></html>
-
Sep 2, 2007, 14:57 #2
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You don't think you could post a live link to your page so I can see the images, do you?
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 2, 2007, 15:22 #3
- Join Date
- Aug 2007
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
hey dan,
nice one for getting back to me.
its a bit all over the place due to the angel fire me thinks with all the banners etc.
http://readysteadyeddy07.angelfire.com/
-
Sep 2, 2007, 15:42 #4
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
try using www.awardspace.com (no banners or other ads - and it's free)
I'll get back to you in a few minutes. Making a late lunch right now.Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 2, 2007, 16:00 #5
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
Dan will help you with the code for the layout - I'll give you the basics.
You can either float both columns ( 2 floated elements will stack against each other if the combined widths of the element don't exceed 100% ).
Or you can float 1 column and leave the other in the normal flow with a margin equal to the width of the column. In this case the float needs to be first in the html.
I think your clearheader div is doing what you would expect and clearing the left column. This could be why the columns aren't side by side.
-
Sep 2, 2007, 16:48 #6
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Oh, I'm going to do more than that.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 2, 2007, 17:59 #7
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
Off Topic:
I'm just buzzing with anticipation
-
Sep 2, 2007, 18:03 #8
- Join Date
- Aug 2007
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
s
Last edited by readysteady; Sep 4, 2007 at 12:26.
-
Sep 2, 2007, 18:30 #9
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If you don't mind me asking, what font did you use for the top link images?
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 2, 2007, 18:37 #10
- Join Date
- Aug 2007
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
DevinneBt roman
-
Sep 2, 2007, 18:44 #11
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ah crud. A non-standard font then. Ok, this is going to take a bit longer than I thought.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 2, 2007, 19:00 #12
- Join Date
- Aug 2007
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
i don't even have the font,i was giving the images already cut up in .jpg
-
Sep 2, 2007, 20:13 #13
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Do you HAVE to use that font, or would you mind if I used plain text for now and then linked you to an image substitution technique?
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 2, 2007, 20:34 #14
- Join Date
- Aug 2007
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
ok dan,
we'll try it that way
-
Sep 2, 2007, 22:00 #15
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hmm... this is unusual. I can't seem to recreate your sliding content area without having it break the layout in Opera.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 2, 2007, 22:21 #16
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
How about this?
Code:#contentcontainer{ margin-left:-1px; }
-
Sep 3, 2007, 14:51 #17
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
This is about the best I could come up with in the short time I had.
http://www.pmob.co.uk/temp/sideways-scroll3.htm
http://www.pmob.co.uk/temp/sideways-scroll2.htm
http://www.pmob.co.uk/temp/sideways-scroll.htm
http://www.pmob.co.uk/temp/2col-nofloatdrop2scroll.htm
All have their problems but no worse than the frames site you linked to.
Bookmarks