How to achieve this CSS layout - Answered [closed]


Tags: html,css

Problem :

Code I Wrote. The layout should be responsive. Could you please help. It is urgent.

<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title></title>
         <style type="text/css">
          .box {
               border: 1px solid black;
               }
         </style>
 </head>
 <body>
  <div style="height: 600px;">
    <div class="box" style="width: 30%; height: 70%; float: left"></div>
    <div class="box" style="width: 69%; height: 20%; float: left;"></div>
    <div class="box" style="width: 15%; height: 50%; float: left;"></div>
    <div class="box" style="width: 54%; height: 10%; float: left;"></div>
    <div class="box" style="width: 54%; height: 70%; float: left;"></div>
    <div class="box" style="width: 45%; height: 30%; float: left;"></div>
</div>
</body>
</html>

![enter image description here][1] Code I Wrote. The layout should be responsive. Could you please help. It is urgent.



Solution :

You can use absolute positioning:

<div style="height: 600px; position: relative;">
    <div class="box" style="width: 30%; height: 70%; top: 0%; left: 0%;">1</div>
    <div class="box" style="width: 70%; height: 20%; top: 0%; left: 30%;">2</div>
    <div class="box" style="width: 15%; height: 50%; top: 20%; left: 30%;">3</div>
    <div class="box" style="width: 55%; height: 10%; top: 20%; left: 45%;">4</div>
    <div class="box" style="width: 55%; height: 70%; top: 30%; left: 45%;">5</div>
    <div class="box" style="width: 45%; height: 30%; top: 70%; left: 0%;">6</div>
</div>

.box {
    border: 1px solid black;
    position: absolute;
}

Fiddle: http://jsfiddle.net/hn5s6/


    CSS Howto..

    How to implement fade in effect for CSS checkbox

    How to get a hidden content to show over cursor using html, css, javascript?

    How to change css pseudo elements in javascript? [duplicate]

    How to get all child elements using an xpath selector?

    How to access smarty variable in css URL attribute?

    How to select Parent Div in CSS [duplicate]

    Dropdown list doesn't show up, what am i doing wrong

    How to call a CSS file from the right place

    How to Create Responsive Web Page With Static Header?

    How can I solve this :before or :after issue in IE7?

    How to pause .setInterval() on hover and on .click() of interior content?

    How to create CSS for round, responsive, bootstrap button with border? Border is affecting pixels

    How to recreate eBay New Logo Page in HTML + CSS

    How to combine two images into one so I can vertically align across all browsers?

    Multiple DIVs, same Classes, how to reduce css markups?

    php css how to change name color based on membership?

    How to remove that ugly border in my link with a background image?

    How can I split code-blocks into a list?

    How to remove the margin at the top of my page

    TUMBLR CSS - How to move the caption on the permalink page to the right of the image

    How to fix CSS wide layout issue?

    How to push up text in CSS?

    How to override a style of a specific Joomla module?

    jQuery slideshow image delay

    Slideshow by changing background-image CSS attribute using JQuery in Drupal 7

    How can I make my web page load faster?

    How to stop DIV from sticking to left of page when zoom in CSS HTML

    How to remove border for last column in css?

    how to fix customize select box using css?

    CSS: How to change spacing between radio button and it's text?