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 link index.html to css file for github page

    How to remove “gap” from nav bar and line?

    How to center banner with jquery mobile?

    How to change the included CSS files on button click?

    (HTML/CSS) How do I repeat items like on Google or Reddit?

    How can I remove a text appearing in quotes after tag using CSS? [duplicate]

    CSS Dropdown menu: How to make absolute positioned sub nav line up perfectly

    How do you make linked text act as if it is normal text?

    How can I change the css class rules using jQuery?

    In CSS: how to specify the font you want as being BOTH monospace and sans-serif?

    How to convert external css properties to inline property? [closed]

    how to make this slide menu work

    how to change the css of default select2 placeholder color?

    How can I make a visual header in CSS without PHP?

    How to float menu list elements

    Scroll to next and previous div using scrollTop, how do I accomplish this?

    How to set a background image in rails from css?

    How do I implement search?

    How to align DIV right or left or center in CSS without absolute positioning?

    PostCSS: How to conditionally add a new rule based on declaration in current rule?

    How can I insert new text with a hyperlink into a page in CSS?

    How to center a text nav bar with CSS

    How to Position Fixed with LOTS elements inside

    How do I detect that facebook app is loading page to change CSS?

    How to remove the input field around an image button?

    How to add label to percentage bar in css and html?

    CSS Overflow: overlay. Is it deprecated? How can I replace it?

    how to show element if visible in view-port with jQuery? (UPDATE)

    How can I know if the user tampered with the CSS or JavaScript to change the appearance of my website?

    How to select the first, second, or third element with a given class name?