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..

    html css: how to draw dotted box around
    ?

    How to create fluid trapezoid image with css?

    how to achieve this css display?

    how to style this form by css (mailchimp)

    How to create a DIV style switcher in JavaScript?

    How to minimize the no of css

    How to make input box show up from right to left?

    Show hidden image with jQuery

    How to retrieve the real height of a #div (including overflowed parts)

    How to change width of

    Dompdf: how to get background image to show on first page only

    How to import css file for into Component .jsx file

    CSS: How to position two elements on top of each other, without specifying a height?

    CSS: How to align text, next to image inside a span?

    how to position/resize image after rotation using css/js so that the image is not positioned outside the div holding it or cropped out

    How to Fix Collapsing Top and Bottom Margins?

    How to set style for a column in an extjs 4 grid [closed]

    How to access lower children using > operator?

    How do I vertically align multiple text next to an image with CSS?

    How to control the CSS of the contents that loaded dynamically into iframe?

    How to implement responsive, independently scrolling panes in Bootstrap 3?

    How to Change CSS direction property of the input field automaticly if the user can use an language rtl or ltr

    How to magnify a pure CSS menu item when hovering using JS?

    How should I organize the contents of my CSS file(s)?

    How to change the background image of input button with jquery

    How to limit height of div when part of 2 vertical divs in fixed parent div

    CSS how to revert SVG animation on mouseout from current frame

    Coding the slideshow

    How do I change the css gradient values when my progress bar value changes?

    How to change a class CSS with a Greasemonkey script?