CODEWITHSUNDEEP
htmlcss
Raf
Raf

Reputation: 708

CSS divs for responsive screen sizes

I have logo and logo name as text to display. Please see the image below to understand my problem clearly. Most tips and answers found are using absolute positioning but this doesnt match my requirements. enter image description here

div class boxes: Yellow: container , Green: for logo, blue: logo text or logo name as text

All the correct display to achieve are found on the right side of the sample div layout image above.

Problem Summary:

  1. Everything will be working fine if both div(logo and logo text) are floated left BUT the only problem is its floated on top. How will I display the "logo text" at the bottom of the "container"?

  2. Is this possible without positioning the "logo text" to absolute?

For now the div container, logo, and logo text classes are floated left.

Upvotes: 1

Views: 3376

Answers (2)

Shiridish
Shiridish

Reputation: 4962

Resize the result window to see the effect.

DEMO

Making your child div's inline-block is the solution. Also you will need to give a max-width and min-height attributes to your container so that it re-sizes to fit your contents. See this solution-

HTML-

<div id="con">
    <div id="lo"></div>
    <div id="tex"></div>
</div>

CSS-

#con
{
    max-width:310px;
    min-height:140px;
    background:yellow;
    border: 1px solid aqua;
}

#lo
{
    width:140px;
    height:140px;
    background:green;
    display:inline-block;
    vertical-align:bottom;
}

#tex
{
    width:160px;
    height:60px;
    background:orange;
    display:inline-block;
    vertical-align: bottom;
}

Upvotes: 0

hajpoj
hajpoj

Reputation: 13379

I think display: inline-block with vertical-align: bottom; gets you where you want to be;

<div class=logo>logo</div>
<div class=name>name</div>​

.logo {
    display: inline-block;
    vertical-align: bottom;
    width: 200px;
    height: 200px;
    background-color: red;
}
.name {
    display: inline-block;
    vertical-align: bttom;
    width: 300px;
    height: 50px;
    background-color: blue;
}

​

Here it is in action: http://jsfiddle.net/hajpoj/CDBHT/

Upvotes: 2

Related Questions