Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jan 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    New to tableless layouts | Question!

    Hey Guys,
    I've been out of touch with the HTML/CSS world for quite some time (since tableless layouts became popular anyway). I'm working on a site which I can't quite seem to figure out how to not use tables. The issue is the main content section contains some dynamic content which pushes the page open. There is also a section to the right of the main content which contains an image. I always want this image to remain vertically aligned in the middle relevant to the content. The nice parts about tables is when one <td> enlarges so does the other <td>. I can't seem to get this same type of effect to occur with divs. The second div has no knowledge of the content div's height so the image always stays aligned to the top. Below is an image to help describe what I'm referring to. Any help would be appreciated. Thanks!


  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Quote Originally Posted by JayStang View Post
    Hey Guys,
    I've been out of touch with the HTML/CSS world for quite some time (since tableless layouts became popular anyway). I'm working on a site which I can't quite seem to figure out how to not use tables. The issue is the main content section contains some dynamic content which pushes the page open. There is also a section to the right of the main content which contains an image. I always want this image to remain vertically aligned in the middle relevant to the content. The nice parts about tables is when one <td> enlarges so does the other <td>. I can't seem to get this same type of effect to occur with divs. The second div has no knowledge of the content div's height so the image always stays aligned to the top. Below is an image to help describe what I'm referring to. Any help would be appreciated. Thanks!
    You are quite correct in that the second DIV has no knowledge of the height of the other DIV. In a case like yours which is very particular, I think it's probably one of the ways, where a table solution is indeed appropriate. Although i'll have a look into this because it's an interesting scenario.

    Most of the cases where people require equal height columns is because they want the column backgrounds to stretch all the way down. This is easily solved using a technique called "faux columns". However you require equal height columns to position an element 50% of the way down, which causes a bit of a problem.

    However the image we are talking about here, does it have to be in the markup or could we use it as a background image? Cause then we could use the faux column technique along with some clever background positioning I think.

    Otherwise as I said it seems tables may be appropriate. But it entirley depends on the exact specs. of the layout. Because one workaround may be to position the element and we could fake it as if it were in the sidebar.

  • #3
    Regular Coder
    Join Date
    Jan 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah interesting. Thanks for the response. The image will most likely be used as a link of some type so a background image isn't an option.

  • #4
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    It absolutely does not require tables and no layout requires tables. Just use any of the vertical positioning techniques available and use it on the image. Then use any of the dual column approaches and it's done.

    That's easy for me to say because I have my own notes on both techniques and can put one together easily if I need it but there's still some work involved and I don't have time to give an example.

  • #5
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    True I guess one way seeing as it is an image (so it will have a fixed height) you could position it 50% from the top of the container and then give a negative margin of half of the height of the image,and that should vertically center it, I think..

  • #6
    Regular Coder
    Join Date
    Jan 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm anyone have examples of this "dual column approach"?

  • #7
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    I was thinking of something like this: (I commented it out a lot, just to show you what was going on incase you was interested.)
    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css" media="screen">
    /*Reset Browser Defaults*/
    *{
    	margin:0;
    	padding:0;
    }
    #container{
    	width:800px; /*Size of Content + Sidebar*/
    	margin:0 auto; /*Center Container*/
    	overflow:auto; /*Contains the Floats*/
    	background:#000; /*Possiblity to Act as a Background For Sidebar*/
    	position:relative; /*Allows for the positioning of the image*/
    }
    #container a.valign{
    	position:absolute;
    	right:0;
    	top:50%; /*Half Way Down but..*/
    	margin-top:-100px; /*....Minus Half of the Total Height of the Image*/
    }
    a img{
    	border:none; /*Remove Default Border which appears around image links*/
    }
    #left{
    	float:left;
    	width:600px;
    	background:#CCC;
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    	<div id="left">
    		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lacus felis, condimentum ac aliquam at, ultricies aliquet metus. Nunc elementum elit eget ligula interdum rhoncus. Fusce sodales, tortor et sollicitudin dapibus, purus lorem tempus sapien, eget viverra nulla metus quis tellus. Proin rutrum tincidunt lorem, sit amet dignissim felis fermentum elementum. Vivamus odio lectus, ornare et auctor nec, ornare eu mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis elementum magna ac neque blandit sodales. Maecenas dui est, laoreet nec faucibus nec, pretium non velit. Suspendisse imperdiet facilisis congue. Mauris ullamcorper hendrerit nisi, ac tristique tortor consectetur sed. Morbi ornare tristique lacus, et adipiscing nibh cursus vel. Aliquam ut sapien ante. Pellentesque aliquam nulla augue, ut ultricies ligula. Nam venenatis interdum mi eu elementum.</p>
            <p>Aliquam erat volutpat. Integer id velit nec justo tristique aliquet et a erat. In consequat condimentum porttitor. Sed sed aliquet purus. Curabitur et enim semper massa consequat dapibus eu id velit. Vivamus quis mauris tincidunt sem elementum commodo nec placerat dolor. Donec eleifend dignissim accumsan. Suspendisse ac augue eu eros cursus consectetur a ut felis. Vestibulum sit amet arcu augue, eu consectetur sem. Nulla rhoncus ornare felis ac hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam gravida augue eget ante dignissim vitae malesuada sapien adipiscing. Praesent ac urna ipsum, nec accumsan mi. Aliquam erat volutpat. Praesent quam elit, aliquet faucibus tristique nec, iaculis sit amet eros. Morbi sit amet laoreet risus. Curabitur mi turpis, dapibus viverra euismod eget, pellentesque gravida velit. Vestibulum augue dolor, semper at sodales nec, eleifend eu erat.</p>
    	Phasellus vehicula diam ultricies justo faucibus quis pulvinar sem ullamcorper. Aenean at sem in velit bibendum venenatis sit amet id tortor. In et turpis libero. Curabitur interdum venenatis pretium. Suspendisse lectus justo, blandit ut porta nec, porta eu ipsum. Ut lacus dui, tristique ac laoreet eget, luctus in risus. Fusce vulputate erat tristique mauris sagittis aliquam. Praesent sagittis dictum scelerisque. Proin metus augue, euismod sit amet eleifend et, consequat ac neque. Vivamus fermentum, tortor ac viverra varius, sem augue convallis elit, bibendum tincidunt magna nibh id mauris. Donec sed metus tellus. Curabitur ipsum augue, viverra eu porta sit amet, accumsan ac felis. Morbi vulputate dignissim aliquet. Phasellus convallis velit vel justo pharetra quis porttitor ligula lobortis. Nulla aliquam pretium congue. Duis suscipit consequat quam, ac tristique mauris dignissim et. Donec tristique orci in magna eleifend eget mattis turpis feugiat.
    	<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>Suspendisse suscipit hendrerit accumsan. Donec iaculis, risus a mollis fringilla, sem est venenatis felis, imperdiet consequat sem odio sed tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla neque quam, iaculis nec elementum at, gravida eu dolor. Ut non dolor nec lectus feugiat dignissim. In neque ligula, luctus a tincidunt sit amet, gravida in massa. Praesent et semper ligula. Sed ac scelerisque diam. Proin non odio purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam dapibus consectetur rutrum. Ut ornare auctor erat sed dapibus.</p>
    	</div>
    	<a href="#" class="valign"><img src="http://farm4.static.flickr.com/3499/3924619524_6942e25b8f.jpg" width="200px" height="200" /></a>
    </div>
    </body>
    </html>
    That's just a basic example based on your screenshots. You'd change the margin-top of the image to half of the height of whatever image you used instead.
    Obviously the entire layout might change based on exactly what was going on, e.g is there to be more inside the sidebar than just the image?

    There might be a better way than this, but it works for me in all browsers (tested: IE 5.5,6,7,8 FF 3.5, Opera, Safari 4)
    Last edited by Scriptet; 10-22-2009 at 08:52 PM.


  •  

    Posting Permissions

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