CODEWITHSUNDEEP
htmlcss
densssky
densssky

Reputation: 3

several questions about how to work with divs

i'm trying to make this:

The black div must be with some background-color, but with a width of 100%. The red div must be with a maximum width of 900px, but with ability to shrink for a minimum of 300px(not less than that). Ignore blue div, did it by mistake. The greed divs, must be of maximum 150px, but able to shrink for a minimum of 100px(not less than that). And the orange div, must fill all this space(600px if green divs 150px(max), and if green divs 100px(min), then it should shrink for a minimum of 100px;).

I have a huuuuge problem makin' this to work. I just can't figure it out how to make this shrinkin' think to work properly :/ All I was tryin' is to play with max-width, min-width and width it self, but every single time something is not working as i wish it to work. The only think is working fine, is the black div. Simply by making it 100% width and height size.

I'm trying to make this with css and html only, and of course with cross-browsing as possible

Upvotes: 0

Views: 69

Answers (2)

Vladimír Hudoba
Vladimír Hudoba

Reputation: 131

Not sure if I fully understand what you wanted, but something like this?

jsfiddle

HTML

<div id="black">
    <div id="red">
        <div class="green first">Word </div>
        <div class="green second">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud"</div>
        <div id="orange">Sed ut perspiciatis unde omnis iste natus errorsit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur</div>
    </div>
</div>

CSS

#black {
    width: 100%;
    height: 50px; /* just for example */
    background-color: #000; 
    text-align: center; /* center red div, because it is inline block */
}
#red {
    overflow: hidden;
    min-height: 100%;
    min-width: 300px;
    max-width: 900px;
    display: inline-block; /* inline block, so it's width will be based on content inside him */
    background-color: red;
    /* text-align: left; if you don't want have centered text */
}
.first {
    float: left;
}
.second {
    float: right;
}
.green {
    max-width: 150px;
    min-width: 100px; 
    min-height: 100%;
    background-color: green;
    padding-bottom: 100%;
    margin-bottom: -100%;
}
#orange {
    background-color: orange;
    min-height: 100%;
    overflow: hidden;

    max-width: 600px;
    min-width: 100px;
    padding-bottom: 100%;
    margin-bottom: -100%;
}

If one of those green divs is empty, it will probably not work.

This in red 

overflow: hidden;

and this in green ones and orange 

padding-bottom: 100%;
margin-bottom: -100%;

makes that they'll have always same height.

This in black

text-align: center;

makes that red one will be centered because it is inline-block.

And making middle div (orange) as last one in html with overflow: hidden in css, makes it to expand the space between those green divs.

EDIT

Edited my code because I read the question wrong

Upvotes: 1

user319940
user319940

Reputation: 3317

I think your missing link here is the use of media queries.

MDN has a great guide:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Essentially, this lets you change the CSS depending on the width of the page.

Upvotes: 1

Related Questions