How to make these Divs responsive?

Asked

Viewed 21,088 times

5

I am creating "informative" to put on the home page of my site and I need a light. I wanted him to stay that way: Demostração de como eu gostaria que ficasse o informativo

And when the visitor’s screen resolution was decreasing, the title and description divs were shrinking. And when the resolution was very small, like 500, the title moved below the image. Example:

Imagem de como eu quero que fique

Simplified code:

<div class="body">
    <div class="i1" id="ID-DA-POSTAGEM">
        <div class="i1Img"><img src="http://i.snag.gy/uIuFD.jpg" /></div>
        <div class="i1Content">…</div>
        <div class="clear"></div>
    </div>
</div>

.clear{clear: both;}
div.body{/*simula largura do site*/
    width:711px; /*original 710px*/
    border:1px solid red; /*borda de marcação*/
    margin:0 auto;
}

.i1Img {
    float:left;
    width:200px; /*largura da imagem*/
}

.i1Content{
    float:right;
    width:505px; /* +200px(imagem) + 5px(padding) = 710px*/
    padding-left:5px;
}

I’ve put the full HTML and CSS I’m using into Jsfiddle http://jsfiddle.net/j75Zh/

html css3 responsive-layout

2 answers

4


Using the Media Queries in CSS, you can do this.

See the example below, taken from the site www.maxdesign.com.au.

The code is simple, and with a quick analysis you understand the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Media query Resolution Dependent Layout</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="master.css" />
</head>
<body>
<div id="container">
    <h1>
        Site name 
    </h1>
    <div id="nav">
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </div>
    <div id="content">
        <h2>
            Main heading here 
        </h2>
        <p>
            <img class="feature-image" src="fern.jpg" alt="fern" />Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
        </p>
    </div>
    <div id="extras">
        <h3>
            Related info 
        </h3>
        <p>
            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 
        </p>
    </div>
</div>
</body>
</html>

mastes.css

/* --------------------------------
Site:       Site name
CSS author: Your name here
Updated:    Date
Updated by: Your name here
-------------------------------- */

/* ----------------------------
simple reset
---------------------------- */

html, body, ul, ol, li, form, fieldset, legend
{
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
fieldset,img { border: 0; }
legend { color: #000; }
li { list-style: none; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }

table
{
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th, td
{
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}

input, textarea, select
{
    font-size: 110%;
    line-height: 1.1;
}

abbr, acronym
{
    border-bottom: .1em dotted;
    cursor: help;
}

body
{
    margin: 20px;
    color: #000;
    background: #fff;
    font: 90%/1.3 "DejaVu Sans", "URW Gothic L", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
}

#container
{
    float: left;
    width: 1000px;
    background: #bbb;
}

#nav
{
    float: left;
    width: 200px;
    background: lime;
}

#content
{
    float: left;
    width: 550px;
    margin: 0 0 0 25px;
    background: yellow;
}

#extras
{
    float: right;
    width: 200px;
    background: gray;
}

.feature-image
{
    float: right;
    margin: 0 0 10px 10px;
}

@media screen and (max-width:999px)
{
    #container { width: 800px; }

    #extras
    {
        clear: left;
        float: none;
        margin: 0 0 0 225px;
        width: 550px;
    }
}

@media screen and (max-width:480px)
{
    #container { width: 400px; }

    #nav
    {
        float: none;
        width: auto;
    }

    #content
    {
        float: none;
        width: auto;
        margin: 0;
    }

    #extras
    {
        float: none;
        width: auto;
        margin: 0;
    }

    .feature-image { display: none; }
}

But be aware that not all browsers support Media-Queries. To maximize compatibility, you should, as a suggestion, use Javascript code that simulates Media-Queries in browsers that do not support it, such as Respons.js

2

Media queries

Use media-queries css3. The most widely accepted mode is the same as the one applied by Bootstrap:

.row::before, .row::after {
  display: table;
  content: " ";
  clear: both;
  line-height: 0;
}
@media (min-width: 640px) {
  .col-3, .col-9 { float: left; }
  .col-3 { width: 25%; }
  .col-9 { width: 75%; }
}

However, Internet Explorer < 9 versions do not give native support. For this, use a library fallback Javascript. There are numerous for this, the most famous are the Respond.js and the css3-mediaqueries-js, still has the matchMedia.js and the media match. For me, the one that usually works best is the css3-mediaqueries-js:

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

However, there is a growing chain of programmers who dispense with this "fallbacks.js" in favour of a better structuring of development front-end. It is contained in the idea that first you should worry about developing layout for mobile devices, and only then apply the behaviors for higher resolutions. There are several reasons for this, but the main ones in our question scope are:

  1. Javascript independence to fix layout bug.
  2. No need to perform an additional HTTP Request.
  3. Unsupported browsers are falling into disuse, and this reduction should be promoted by us programmers. If the browser does not support media-queries, it will show content as for mobile device.

.imagem {
  background: #dd6666;
  height: 150px;
}
.titulo {
  background: #66dd66;
  margin: 0;
  padding: 20px;
}
.descricao {
  background: #6666ee;
  margin: 0;
  padding: 20px;
}
h1, p {
  margin: 0;
}
.row::before,
.row::after {
  display: table;
  content: " ";
  clear: both;
  line-height: 0;
}
@media (min-width: 640px) {
  .col-3 {
    float: left;
    width: 25%;
  }
  .col-9 {
    float: left;
    width: 75%;
  }
}
<!--[if lte IE 8]>
<script src="//cdn.jsdelivr.net/css3-mediaqueries/0.1/css3-mediaqueries.min.js"></script>
<![endif]-->

<div class="row">
  <div class="col-3 imagem">
  </div>
  <div class="col-9">
    <div class="titulo">
      <h1>Título da Imagem</h1>
    </div>
    <div class="descricao">
      <p>Descrição da imagem</p>
    </div>
  </div>
</div>

Media Types

Another alternative is to separate styles into different files by resolution and device type. Which gives greater maintainability and flexibility:

<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="enhanced.css" media="screen  and (min-width: 40.5em)" />

More about:

http://www.html5rocks.com/en/mobile/responsivedesign/

Browser other questions tagged html css3 responsive-layout

You are not signed in. Login or sign up in order to post.