CODEWITHSUNDEEP
htmlcss
cch
cch

Reputation: 3386

HTML layout for a div

How can I produce a div that will have the following layout so I could make its contents to adjust when is resized? How should i structure this, so I could make use of media queries? Do I need to have another div that will wrap all of this? 

+-----------+---------------------------------------+
+           + Title                                 +
+Image      + Description                           +
+           +                                       +
+-----------+---------------------------------------+
+Another container                                  +
+                                                   +
+---------------------------------------------------+

Update: Used both answers and came up with http://jsfiddle.net/EzV4R/10/

Upvotes: 3

Views: 121

Answers (6)

Ahmad
Ahmad

Reputation: 613

<section>
    <div class="inlineImg">
        <!-- image -->
    </div>
    <aside>
        <h3>Title</h3>
        <p>Description</p>
    </aside>
</section>
<section id="other">Another Container</section>

CSS:

* {
    margin: 0;
    padding: 0;
}

section {
    width: 100%;
    overflow: hidden;
    background-color: green;
}

div.inlineImg {
    background-color: blue;
    width: 40%;
    height: 100px;
    float: left;
}

aside {
    width: 60%;
    height: 100px;
    background-color: red;
    float: left;
}

#other {
    height: 100px;
}

JSFiddle

Upvotes: 0

Marco Dan Castillo
Marco Dan Castillo

Reputation: 21

I always like to wrap structures but it is not necessary, so I would try this:

HTML 

    <div id="main" class="wrapper">
      <div id="topleft" class="left"></div>
      <div id="topright" class="right"></div>
      <div style = "clear:both">
      <div id="container"></div>
    </div>

CSS

    #main {size that you want}
    #topleft {size that you want}
    #topright {size that you want}
    .left { float: left; }
    .right { float: right; }
    #container { width: 100% }

Upvotes: 2

SW4
SW4

Reputation: 71140

If you want to make the most of CSS3 and do away with inline styles (bad) and floats, try:

Demo Fiddle

It has the added benefits of:

  1. Resizing with the page

  2. Minimizing the cell containing the image to only the image size (width)

HTML

<div class='table'>
    <div class='cell'>Image</div>
    <div class='cell'>Title<br />Description</div>
    <div class='caption'>Another container </div>
</div>

CSS

.table {
    display:table;
    width:100%;
}
.cell {
    display:table-cell;
}
.cell :first-child{
    width:1%;
}
.caption {
    display:table-caption;
    caption-side:bottom;
}
.cell, .caption {
    border:1px solid black;

}

Upvotes: 2

Vivek Keshri
Vivek Keshri

Reputation: 108

<div id="main">
  <div id="logo"></div>
  <div id="desc"></div>
  <div id="clr"></div>
  <div id="content"></div>
</div>

CSS : 

#main {margin:0;padding:0;}
#logo {width:20%;float:left;}
#desc {width:80%;float:left;}
#clr{width:100%;clear:both;}
#content{width:100%;}

Upvotes: 0

Harsh
Harsh

Reputation: 1695

Try this: 

    <div >
    <div  style="float:left width:50%">Image</div>
    <div  style="float:right width:50%">
    <div >Title</div>
    <div >Description </div>
    </div>
    </div>
    <div  style=" width:100%">Another container </div>

Upvotes: 1

D.R.
D.R.

Reputation: 21194

<div id="topleft" style="float:left">TOPLEFT</div>
<div id="topright" style="float:right">TOPRIGHT</div>
<div id="container" style="clear:both">CONTAINER</div>

Upvotes: 1

Related Questions