How to make these divs responsive?

Question

How to make these divs responsive?

Navigation

#1 by (2 votes)
#2 by (1 votes)

4

I'm creating "informative" to put on the home page of my site and need a light. I wanted it to look like this:

Andwhenthevisitor'sscreenresolutionwasdeclining,thetitle'sanddescription'sdiveswereshrinking.Andwhentheresolutionwasverysmall,like500,thetitlewouldmovebelowtheimage.Example:

Simplified code:

<div class="body">
    <div class="i1" id="ID-DA-POSTAGEM">
        <div class="i1Img"><img src="http://i.snag.gy/uIuFD.jpg"/></div><divclass="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 put the full HTML and CSS that I'm using in JSFiddle link

html css3 layout-responsivo

asked by anonymous 09.03.2014 / 00:33

2 answers

Is it possible to use any programming language in Windows Azure? As? JSON returning html

score 2 · Answer 1

Using Media Queries in CSS, you can do that.

See the example below, taken from www.maxdesign.com.au / a>.

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 use JavaScript code to simulate Media-Queries as a hint in browsers that do not support it, such as Respons .js

score 1 · Answer 2

Media queries

Use media-queries of css3. The most widely accepted mode is 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, the Internet Explorer < 9 do not give native support. To do this, use a fallback JavaScript library. There are numerous for this, the most famous are the Respond.js and the css3-mediaqueries-js , you still have matchMedia.js and to media-match . For me, the one that works best is css3-mediaqueries-js :

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

However,thereisagrowingstreamofprogrammerswhodispensewiththisfallbacks.js"in favor of better structuring front-end development. It is contained in the idea that you first have to worry about developing mobile layout, and only then apply the behaviors to higher resolutions. There are several reasons for this, but the main ones in our scope of inquiry are:

JavaScript independence to fix layout bug.

Needless to make an HTTP Request more.

Browsers that do not support are falling into disuse, and this reduction should be promoted by us programmers. If the browser does not support media-queries , it will show the content as mobile.

.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

Alternatively, you can separate styles into different files by resolution and device type. What 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:

link