SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Los Angeles
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 column CSS layout suggestion

    I am trying to figure out a 2 column layout which on each side consist of text and image. That would be text/image on left column and text/image on right column. I have no trouble creating a container and two different classes of right and left however, I am not able to align both columns with text/image up at the top. I have attached an image of how it should look.

    And if you wouldn't mind, please show me the CSS to accomplish this.

    Thanks.

    Please see. (Mark I know you solve this)...
    Last edited by NRG77; Feb 20, 2007 at 00:26.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's going to depend on a few things, really. Do you intend to support Internet Explorer 5.x and will this be a fixed width or fluid/liquid layout? Most of the CSS will be the same regardless, but there will be a few changes depending on how you want the site to be presented the way you want it.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Los Angeles
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    It's going to depend on a few things, really. Do you intend to support Internet Explorer 5.x and will this be a fixed width or fluid/liquid layout? Most of the CSS will be the same regardless, but there will be a few changes depending on how you want the site to be presented the way you want it.
    This is going to be a fixed width 750px center aligned. And I would like support for IE5. Thanks.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Los Angeles
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, looks so complicated...

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Los Angeles
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice examples of the potential of CSS. Now I will have to "decode" your coding and try to understand each element and why it is being used in this way....

    There are a lot of little implements of the code I do not yet understand. For example, why use <span></span> with nothing between the tags? Another obvious code that I don't have a clue is some like "head+/* */body .fc:after{ /* min-height browser but not IE 7 */". I know that is for different browser compatibility but I am not aware you can use "head+"..etc...

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll get back to you tomorrow .

    I've been busy all weekend gaming .

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Los Angeles
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since the above code was a little difficult for me, I try to create one myself and this is what I have so far.



    However, as you can see, something is wrong. The left image on the left column should line up with the second title down not up under the first image. I can't figure out how to go about that. Here is my code...

    HTML
    Code:
    </head>
    
    <body>
    	<div id="container">
    		
    		<div id="header">
    			<a href="index.html">Home</a> | <a href="contact.html">Contact Us</a>
    		
    			<div id="nav">	
    			<ul>
    				<li><a href="index.html" title="Homepage">Home</a> | </li>
    				<li><a href="company.html" title="Information about our company">Company</a> | </li>
    				<li><a href="services.html" title="All services and products we provide">Services</a> | </li>
    				<li><a href="portfolio.html" title="Showcase of our designs">Portfolio</a> | </li>
    				<li><a href="contact.html" title="To get in touch with us">Contact</a></li>
    			</ul>
    			</div><!--nav-->
    		</div><!--header-->	
    		
    		<div class="content">
    			<div id="leftcol">
    			<img src="images/home_image1.jpg" height="80" width="100" alt="Stats" class="imgright" />
    			<div class="textleft1">
    			<h4>Welcome</h4>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla commodo, tellus quis pharetra luctus, nibh ligula convallis diam, ac scelerisque risus arcu at velit. Aliquam urna neque, euismod id, faucibus vitae, porta aliquet, justo. Donec pellentesque hendrerit enim. Nulla placerat, urna id suscipit bibendum, lacus sapien eleifend ante, in tincidunt orci ipsum sit amet diam. Ut pharetra adipiscing quam. Ut consequat. Aliquam semper risus vitae massa. Nam quis erat. Aliquam eros felis, consectetuer a, iaculis sed, malesuada id, leo. Phasellus libero leo, fermentum varius, tincidunt quis, tempor id, magna.</p>
    			</div> <!--textleft-->
    <img src="images/home_image1.jpg" height="80" width="100" alt="Stats" class="imgright" />
    			<div class="textleft1">
    			<h4>Welcome</h4>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla commodo, tellus quis pharetra luctus, nibh ligula convallis diam, ac scelerisque risus arcu at velit. Aliquam urna neque, euismod id, faucibus vitae, porta aliquet, justo. Donec pellentesque hendrerit enim. Nulla placerat, urna id suscipit bibendum, lacus sapien eleifend ante, in tincidunt orci ipsum sit amet diam. Ut pharetra adipiscing quam. Ut consequat. Aliquam semper risus vitae massa. Nam quis erat. Aliquam eros felis, consectetuer a, iaculis sed, malesuada id, leo. Phasellus libero leo, fermentum varius, tincidunt quis, tempor id, magna.</p>
    			</div> <!--textleft-->
    			</div> <!--leftcol-->
    			
    			<div id="rightcol">
    			<img src="images/home_image2.jpg" height="80" width="100" alt="Team Work" class="imgright" />
    			<div class="textleft1">
    			<h4>We will work with you!</h4>
    			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla commodo, tellus quis pharetra luctus, nibh ligula convallis diam, ac scelerisque risus arcu at velit. Aliquam urna neque, euismod id, faucibus vitae, porta aliquet, justo. Donec pellentesque hendrerit enim. Nulla placerat, urna id suscipit bibendum, lacus sapien eleifend ante, in tincidunt orci ipsum sit amet diam. Ut pharetra adipiscing quam. Ut consequat. Aliquam semper risus vitae massa. Nam quis erat. Aliquam eros felis, consectetuer a, iaculis sed, malesuada id, leo. Phasellus libero leo, fermentum varius, tincidunt quis, tempor id, magna.</p>
    			</div><!--textleft-->
    			</div><!--rightcol-->
    			
    		</div> <!--content-->
    		
    		<div id="footer">
    			<p class="nogap">Copyright &copy; 2007 company Design, LLC. All Rights Reserved.</p>
    			<a href="">Private Policy</a> | <a href="">Terms &amp; Conditions</a>
    		</div> <!--footer-->
    		
    	</div> <!--container-->
    </body>
    </html>
    CSS
    Code:
    html,body {
    	height:100%;
    	margin: 0;
    	padding: 0;
    	background-color: #FFFFFF;
    	text-align: center;
    	color:#858585;
    	font-size:small;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    }
    
    * html body {
        font-size: x-small; /* for IE5 Win */
        font-size: small; /* for other IE versions */
    }
    
    html>body {
        font-size: small; /* for opera */
    }
    
    p { font-size: 85%; padding: .4em 0; line-height: 1.2em; text-align:justify; }
    ul, dl { font-size: 100%; padding: .5em 1em .5em 2em; }
    ul li { line-height: 1.2em; }
    img { border: 0; }
    
    #container{
    	width:750px;
    	text-align:center;
    	background-color:#FFFFFF;
    	margin-left: auto;
    	margin-right:auto;
    }
    
    * html #container{height:100%;} /*for IE as it treats height as min-height anyway*/
    
    #header {
    	background-image:url(../images/header.jpg);
    	background-color:#FFFFFF;
    	background-repeat:no-repeat;	
    	background-position: top left;
    	padding: 5px 10px 5px 0;
    	height: 142px;
    	text-align: right;
    	}
    	
    #header a:link, #header a:visited {
    	text-decoration: none;
    	color:#999999;
    }
    
    #header a:hover, #header a:active{
    	text-decoration: none;
    	color:#33CCFF;
    }
    
    #nav{
    	text-align: right;
    	margin-right:0px;
    	margin-top:93px;
    	font:1.0em Verdana, Arial, Helvetica, sans-serif; 
    }
    	
    #nav li {
    	display:inline;
    }
    
    #nav ul {
    	list-style: none;
    	margin:0;
    	padding:0;
    }
    
    #nav a:link, #nav a:visited {
    	text-decoration: none;
    	color:#0000FF;
    }
    
    #nav a:hover, #nav a:active {
    	text-decoration: none;
    	color:#FFFFFF;
    }
    
    .content {
    	margin: 10px;
    	width:750px;
    }
    
    .content h4 {
    	font-size:1.0em;
    	color:#0099FF;
    }
    
    #rightcol {
    	text-align:left;
    	float:right;
    	width:355px;
    	margin-bottom:0px;
    	margin-right:10px;
    	margin-left:10px;
    }
    #leftcol {
    	text-align:left;
    	width:355px;
    	float:left;
    	margin-bottom:0px;
    	margin-left:0px;
    }
    
    .imgright {
    	margin-right:10px;
    	float:right;
    	margin-left: 10px;
    	margin-bottom:10px;
    }
    
    .textleft1 {
    	float:left;
    	width:230px;
    	margin-right:0px;
    	margin-left:0px;
    	margin-top:10px;
    	margin-bottom:10px;
    }
    
    .nogap {
    	margin-top:2px;
    	margin-bottom:-0.5px;
    	padding-top:12px;
    	text-align:center;
    }
    
    #footer {
    	background-image:url(../images/footer.jpg);
    	background-color:#FFFFFF;
    	background-repeat:no-repeat;
    	background-position: bottom left;
    	font:80% Verdana, Arial, Helvetica, sans-serif;
    	height:44px;
    	margin-top:auto;
    	text-align: center;
    	clear:both;
    	line-height:1.2;
    }
    
    
    #footer a:link, #footer a:visited {
    	text-decoration: none;
    	color:#666666;
    }
    
    #footer a:hover, #footer a:active {
    	text-decoration: none;
    	color:#00CCFF;
    }

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Los Angeles
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well now you can see that I have a table's layout mentality...... Thank you for your input once again, I am still trying to learn as quickly as I can all about CSS.

  9. #9
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Los Angeles
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I have changed it to your suggestion to left/right clear. But now I face a problem where the image does not line up with the text to the left. In FF, the image is much higher than the text and in IE6, it looks ok..

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Los Angeles
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I did not use overflow at all in my code, as I don't understand what it does. Can you enlighten me?

  11. #11
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Location
    Los Angeles
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I am strarting to get the picture now...(after 3 examples ). I have read all the work arounds that you provided links to and they are indeed very useful.

    I do still have one question which is not related to layouts. Since BR tag is deprecated, how am I to go about eliminating the extra line space between paragraphs? Please don't tell me I have to use line-height as that has given me some nightmares.

    Again thanks for all the patience...


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •