SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to do this layout

    Hi all

    I have a layout that I'm a bit stuck with.

    http://www.ttmt.org.uk/layout/layout.png

    It's a banner with an image on tht left and an info box on the right

    The info box contains a block of text and a link.

    The banner needs to be responsive so the info box will get narrower and taller but the image and the link will still be in the center.

    I have this but I'm not sure it's thr best way to do it.

    http://www.ttmt.org.uk/layout/index.html

    Code:
    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      <meta name="description" content="">
      <meta name="keywords" content="">
      <meta name="robots" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        
      
      <!--css-->
      
      <style type="text/css">
        *{
          margin: 0;
          padding: 0;
        }
        body{
          background: #ccc;
        }
        
        .container{
          background: white;
          overflow: auto;
          max-width: 800px;
          margin: 0 auto;
        }
        img{
          float: left;
        }
        .info{
          border: 1px solid #aaa;
          width: 80%;
          margin:10px ;
          float: right;
        }
        .info p{
          padding: 20px 150px 20px 10px;
        }
        .info a{
          background: red;
          color: white;
          padding: 10px;
          float: right;
          text-decoration: none;
          margin: -80px 10px 0 0;
        }
      </style>
      
        
      <title>Title of the document</title>
      </head>
      
    <body>
      
        <div class="container">
          <img src="face.png" alt=""/>
          <div class="info">
            <p>
              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 
            </p>  
            <a href>Learn More</a>
          </div>  
        </div>  
      
    </body>
    
    </html>

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    I guess you could try this:
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="robots" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>Title of the document</title>
    <!--css-->
        <style type="text/css">
    * {
        padding:0;
        margin:0;
    }
    body {
        background:#ccc;
    }
    .container {
        display:table;
        table-layout:fixed;
        background:white;
        max-width:800px;
        padding:10px;
        margin:0 auto;
    }
    .container > div {
        display:table-cell;
        vertical-align:middle;
    }
    img {
        display:block;
        margin-right:10px;
    }
    .info {
        border:1px solid #aaa;
        border-right:0 none;
    }
    .goto {
        border:1px solid #aaa;
        border-left:0 none;
        padding:10px;
    }
    p {
        padding:10px;
    }
    a {
        background:red;
        color:white;
        white-space:nowrap;
        text-decoration:none;
        padding:10px;
    }
        </style>
    </head>
    <body>
      
    <div class="container">
        <div>
            <img src="face.png" alt="" width="133" height="133">
        </div>  
        <div class="info">
            <p>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.</p>  
        </div>  
        <div class="goto">
            <a href="">Learn More</a>
        </div>  
    </div>  
    
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that ronpat.

    I always forget about display:table, I think it just makes me think of tables.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by ttmt View Post
    Thanks for that ronpat.

    I always forget about display:table, I think it just makes me think of tables.
    I know the feeling all too well. The nice thing is that valued table behaviors are now available in CSS. Extendable, equal height columns... vertically centered items in each column... hard to beat.

  5. #5
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's worked perfect here and saved me a lot of head scratching - I will remember display:table

    One question is table-layout:fixed; needed here - I don't have a problem with it but removing it doesn't alter the layout

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ttmt View Post
    It's worked perfect here and saved me a lot of head scratching - I will remember display:table

    One question is table-layout:fixed; needed here - I don't have a problem with it but removing it doesn't alter the layout
    It shouldn't make any difference here but generally when dealing with fixed width cells then table-layout:fixed is the best option.

    In normal html tables the table-layout:fixed algorithm is a 'one pass' algorithm and is quicker for tables where sizes are defined. The table-layout:auto algorithm is a "two pass" algorithm where the tables are laid out and content added and then a second pass is made to adjust the contents to fit the cells as required which results in a slower process. (I'm not sure if CSS follows this same principle though but I would guess it would have to do something similar.)

  7. #7
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've had to change the layout of the code so text and the button are contained in their own div. Now the image is taller than the div containing the text and button.

    How can I stretch the cell contianing the text and button so it's the same height as the cell with the image in it.

    http://www.ttmt.org.uk/layout/

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="robots" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>Title of the document</title>
    <!--css-->
        <style type="text/css">
    * {
        padding:0;
        margin:0;
    }
    body {
        background:#ccc;
    }
    .container {
        display:table;
        table-layout:fixed;
        background:white;
        max-width:800px;
        padding:10px;
        margin:0 auto;
    }
    
    .container .img,
    .container .info-wrap .info,
    .container .info-wrap .goto{
      display:table-cell;
      vertical-align:middle;
    }
    
    .container .info-wrap{
      background: yellow;
      min-height: 100% !important;
    }
    
    img {
        display:block;
        margin-right:10px;
    }
    
    p {
        padding:10px;
    }
    a {
        background:red;
        color:white;
        white-space:nowrap;
        text-decoration:none;
        padding:10px;
    }
        </style>
    </head>
    <body>
      
    <div class="container">
        <div class="img">
            <img src="face.png" alt="" width="133" height="133">
        </div>  
        <div class="info-wrap">
          <div class="info">
              <p>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.</p>  
          </div>  
          <div class="goto">
              <a href="">Learn More</a>
          </div> 
        </div> 
    </div>  
    
    </body>
    </html>

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    May I ask why the change was necessary? The previous code should have been worked fine unless positioning was required and that isn't apparent.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Do you mean this:

    Code:
    .container .img,
    .container .info-wrap .info,
    .container .info-wrap .goto,
    .container .info-wrap{
      display:table-cell;
      vertical-align:middle;
    }
    .container .info-wrap{
      background: yellow;
    }

  10. #10
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ronpat - It's a styling issue, I need a border along the bottom of the yellow block. I know I can put a border on the two element separately but I've been told I need to have one surrounding element.

    Paul O'B - Thanks that what I wanted, I had tried that in my actual code but it didn't work, I think I need to check the html

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ttmt View Post
    Paul O'B - Thanks that what I wanted, I had tried that in my actual code but it didn't work, I think I need to check the html
    It works fine with the html you posted above so you may have something different in the real version.

    Remember that you need to take care of the elements as though they were table components (when using the display:table properties) so the html must make sense. (Although there are shortcuts as the browsers will try and construct anonymous elements if you omit them. e.g. if you call something display:table-cell then the browsers constructs an anonymous table-row and table parent structure to make it work.)

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,541
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    Thanks for describing the design goal. It was helpful .

    Paul's code works fine for me.

    This is my original suggested code modified to have a border beneath the .info and .goto cells instead of around them. There is no .info-wrap box. The .info-wrap cell is convenient, but it isn't necessary in this case. Different strokes...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="robots" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>Title of the document</title>
    <!--css-->
        <style type="text/css">
    * {
        padding:0;
        margin:0;
    }
    body {
        background:#ccc;
    }
    .container {
        display:table;
        table-layout:fixed;
        background:#fff;
        max-width:800px;
        padding:10px;
        margin:0 auto;
    }
    .container > div {
        display:table-cell;
        vertical-align:middle;
    }
    img {
        display:block;
        margin-right:10px;
    }
    .info,
    .goto {
        background:#ffa;
        border-bottom:2px solid #aaa;
    }
    p {
        padding:10px;
    }
    a {
        background:#f00;
        color:#fff;
        white-space:nowrap;
        text-decoration:none;
        padding:10px;
    }
        </style>
    </head>
    <body>
      
    <div class="container">
        <div>
            <img src="face.png" alt="" width="133" height="133">
        </div>  
        <div class="info">
            <p>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.</p>  
        </div>  
        <div class="goto">
            <a href="">Learn More</a>
        </div>  
    </div>  
    
    </body>
    </html>
    Edit: and if I read more carefully, I would have noticed that you are required to have one containing element. My oversight. Sorry.

  13. #13
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry got it wrong I don't need to stretch the yellow cell but have it site vertically in the center, so it's aligned to the center of the image.

    I need it to look like the example here but I have done this by adding margin-top to the yellow container. When the window is resized it doesn't stay centered. Can I vertically align it to the image cell.

    http://www.ttmt.org.uk/layout/

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="robots" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <title>Title of the document</title>
    <!--css-->
        <style type="text/css">
    * {
        padding:0;
        margin:0;
    }
    body {
        background:#ccc;
    }
    .container {
        display:table;
        table-layout:fixed;
        background:white;
        max-width:800px;
        padding:10px;
        margin:0 auto;
    }
    
    .container .img,
    .container .info-wrap .info,
    .container .info-wrap .goto{
      display:table-cell;
      vertical-align:middle;
    }
    .container .info-wrap{
      margin:25px  0 0 0;
      background: yellow;
      border-bottom:6px solid red;
    }
    
    .container .info-wrap{
      background: yellow;
      min-height: 100% !important;
    }
    
    img {
        display:block;
        margin-right:10px;
    }
    
    p {
        padding:10px;
    }
    a {
        background:red;
        color:white;
        white-space:nowrap;
        text-decoration:none;
        padding:10px;
    }
        </style>
    </head>
    <body>
      
    <div class="container">
        <div class="img">
            <img src="face.png" alt="" width="133" height="133">
        </div>  
        <div class="info-wrap">
          <div class="info">
              <p>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.</p>  
          </div>  
          <div class="goto">
              <a href="">Learn More</a>
          </div> 
        </div> 
    </div>  
    
    </body>
    </html>

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    You keep removing the display:table-cell from .info-wrap and I keep putting it back in

    Code:
    * {
    	padding:0;
    	margin:0;
    }
    body { background:#ccc; }
    .container {
    	display:table;
    	table-layout:fixed;
    	background:white;
    	max-width:800px;
    	padding:10px;
    	margin:0 auto;
    }
    .container .img, .container .info-wrap .info, .container .info-wrap .goto, .container .info-wrap {
    	display:table-cell;
    	vertical-align:middle;
    }
    .container .info {
    	margin:25px 0 0 0;
    	background: yellow;
    	border-bottom:6px solid red;
    }
    .goto {
    	background: yellow;
    	border-bottom:6px solid red;
    }
    img {
    	display:block;
    	margin-right:10px;
    }
    p { padding:10px; }
    a {
    	background:red;
    	color:white;
    	white-space:nowrap;
    	text-decoration:none;
    	padding:10px;
    }
    The elements will automatically vertically align if within a table-cell set to vertical-align:middle. You just need the background on the elements themselves and not the cell.

  15. #15
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help Paul O'B, i think I've sorted it out now

  16. #16
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry i have another question

    Is it possible to get the same layout, or something close using this html in IE7

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    It's a little tricky but something like this might work.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="robots" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title of the document</title>
    <!--css-->
    <style type="text/css">
    * {
    	padding:0;
    	margin:0;
    }
    body { background:#ccc; }
    .container {
    	display:table;
    	table-layout:fixed;
    	background:white;
    	max-width:800px;
    	padding:10px;
    	margin:0 auto;
    }
    .container .img, .container .info-wrap .info, .container .info-wrap .goto, .container .info-wrap {
    	display:table-cell;
    	vertical-align:middle;
    }
    .container .info {
    	margin:0;
    	background: yellow;
    	border-bottom:6px solid red;
    }
    .goto {
    	background: yellow;
    	border-bottom:6px solid red;
    }
    img {
    	display:block;
    	margin-right:10px;
    }
    p { padding:10px; }
    a {
    	background:red;
    	color:white;
    	white-space:nowrap;
    	text-decoration:none;
    	padding:10px;
    }
    </style>
    <!--[if lte IE 7]>
    <style>
    .container{position:relative;min-height:150px;zoom:1.0}
    * html .container{height:150px}
    .container .img {
    	position:absolute;
    	left:10px;
    	top:50%;
    	margin-top:-65px;
    }
    .container .info-wrap{
    	padding-left:145px;
    	zoom:1.0;
    	position:relative;
    	top:50%;
    }
    .container .info{
    	zoom:1.0;
    	position:relative;
    	top:-50%;
    	display:inline;
    	padding-right:125px;
    }
    .container .goto{
    	position:absolute;
    	right:40px;
    	height:25px;
    	line-height:25px;
    	margin-top:-12px;
    	width:90px;
    }
    * html .container .goto{right:15px}
    .container .goto a{
    	display:block;
    	height:25px;
    	line-height:25px;
    	padding:0;
    	text-align:center;
    	border:none;
    	zoom:1.0;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="container">
    		<div class="img"> <img src="http://www.ttmt.org.uk/layout/face.png" alt="" width="133" height="133"> </div>
    		<div class="info-wrap">
    				<div class="info">
    						<p>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.</p>
    				</div>
    				<div class="goto"> <a href="">Learn More</a> </div>
    		</div>
    </div>
    </body>
    </html>
    The code does assume that the image width won't change much.

    Remember that Conditional comments don't go in the stylesheet - just call the ie stylesheet from within the conditional comments after the main stylesheet.

  18. #18
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B that really helped me out.

    The width can't really change in IE7 can it?

    This was more just a catch all sort of option. I can't imagine many people are using IE7

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,389
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ttmt View Post

    The width can't really change in IE7 can it?
    I'm not sure what you mean exactly?

    If you are referring to the image with then not really because you have to use a margin to keep clear of the image. You can just set a width and hide the overflow if you are using bigger or smaller images so that it doesn't break badly. Most people are dropping support for IE7 these days but if the the fixes are easy then I usually build them in anyway unless it means too much work.


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
  •