Results 1 to 1 of 1

Thread: Best way to do a layout

  1. #1
    Join Date
    Feb 2009

    Best way to do this layout

    Best way to do a layout

    Hi all

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


    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.


    <!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" />
      <style type="text/css">
          margin: 0;
          padding: 0;
          background: #ccc;
          background: white;
          overflow: auto;
          max-width: 800px;
          margin: 0 auto;
          float: left;
          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;
      <title>Title of the document</title>
        <div class="container">
          <img src="face.png" alt=""/>
          <div class="info">
              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 
            <a href>Learn More</a>
    Last edited by ttmt; 02-07-2014 at 05:28 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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