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 show element if visible in view-port with jQuery? (UPDATE)

    How to set a CSS background to scroll slowly?

    CSS: How to drill all the underlying layers up to the background?

    CSS HTML how to remove whole cell links in tables?

    How to position two
  • 's within a nested
      ?
  • How to make pure CSS dropdown menu appear with a fade in/slowly

    How do i center an HTML DIV with logo on the left?

    Web Extension : How do I use “browser_style = true”?

    How can i make a div to slide in from right side to left?

    Live search div not showing up when something is entered

    More CSS woes: how to stack divs inside another div, and have them all behave?

    How to make a horizontal div scroll bar float like a fixed CSS div

    How to center a span in a div

    How to vertically center dynamically 1 or 2 lines of text with CSS? [duplicate]

    How can I make my web application look correct in IE 8 and 9? [closed]

    how to use php variable in css

    How would you code this: The SO Menu [closed]

    HTML+CSS : how to move not close divs to create a right column?

    How can I pipe the output from gulp-w3c-css to the console

    showing/hiding content is not working in JQuery/CSS

    How to set up fields position?

    How could I have an iframe that shows the target page and all it's elements at 50% scale?

    How to bottom-align these divs?

    How do I create a menu that appears on hover?

    How to make edgy corners with css

    How to convert a rectangle to TRBL CSS rect value?

    How to change css style for only one image in specific page in wordpress?

    How to set the select to have the width of the selected option

    How to change color in first td in my table using class

    How can I separate and make a menu with these links in CSS without using unordered lists [closed]