Responsive design problem

HTML & CSS
1

I’m trying to get 2 div’s side by side and when the resolution becomes less than 1024px wide the first div will get smaller (it’s an image) and the second will stay the same width. I want the image in the first div to be overflow:hidden and gradually get obscured if you shrink the window. What happens is that when I shrink my window to check the responsiveness, the second div with the text in it just wraps under the first div instead of the first div getting hidden and leaving the 318px intact to the right of it. The first div shows overflow:hidden but not at the rate that it leaves 318px room to the right, so the second div just falls underneath it.

here’s my code:
xhtml:
<body>
<div id=“wrapper”>
<div id=“testwrap”>
<div id=“inside”><img src=“aerial.jpg” alt=“” width=“640” height=“300” /></div>
<div id=“inside2”>inside 2 inside 2 inside 2 inside 2 inside 2 inside 2 inside 2 inside 2 inside 2 inside 2inside 2 inside 2 inside 2 inside 2 inside 2 inside 2 inside 2 inside 2 inside 2 inside 2 inside 2 </div>
</div>
</div>
</body>

and my css:
#wrapper{
width:960px; border:1px solid #f00;
}
#inside{
width:66.66666666666667%;/640/960/float:left; overflow:hidden;
}
#inside img{
max-width:auto; display:block;
}
#inside2{
float: left;width:318px;border:1px solid #00f;
}
@media screen and (min-width: 760px) and (max-width: 1023px) {
#wrapper{
width:100%;
}
#testwrap{
width:100%; overflow:visible;
}
}

All help greatly appreciated.

R

2

Mixing px and % is likely to fail at some point. Better to keep things consistent, say like this:


@media screen and (min-width: 760px) and (max-width: 1023px) {
#wrapper{
width:100%;
}
#testwrap{
width:100%; overflow:visible;
}
[COLOR="#FF0000"]#inside2 {
width: 33%;
}[/COLOR]
}
3

the problem with that is that I don’t want the right div’s contents to get so tall, that that div becomes larger than the div on the left which is an image. I’d like it to keep it the same height and be able to show all it’s content without it spilling out of its container.
Make sense?
Thanks.
Rick

4

I figured it out. I floated to the right, the right div (inside2) and put it first in the html. then I didn’t float the div on the left which was the image. I kept a fixed width on the div on the right, also. I “position:relative” both divs and their containing div. then I z-indexed the div’s so the one on the right would go over the one on the left.

here’s the css:
#wrapper{
width:960px; margin:0 auto;
}
#inside{
overflow: hidden;
width: 66.6667%;position:relative;
z-index:1;
}
#inside img{
max-width:auto; display:block;
}
#inside2{
background-color: #FF9900;
border-radius: 0 8px 8px 0;
float: right;
height: 300px;
width: 320px; position:relative; z-index:5;
}
#testwrap{
width:100%; position:relative;
}
@media screen and (min-width: 760px) and (max-width: 959px) {
#wrapper{
width:100%;
}
}

and here’s the html:
<body>
<div id=“wrapper”>
<p> hi there.</p>
<div id=“testwrap”>

<div id=“inside2”>inside 2 inside 2 inside 2 </div>
<div id=“inside”><img src=“aerial.jpg” alt=“” width=“640” height=“300” /></div>
</div>
</div>
</body>

Rick

5

Hm, I can see what you want, and the trouble is that because wrap can get smaller than 960, floats would rather drop than compress.

I think as you shrink the browser computes the pixel-width of the 66% width inside1 box and whenever that’s larger than 328px + computed-for-inside1, you get float drop.

You probably will have to do something smaller than 66%, and you have to keep in mind the other box takes up 328px in total.

You know what else you could do? You could float inside1 left and give it a right margin of 328px-- exactly the room needed for the other div.

Then maybe place inside2 directly on top of this margin space. Maybe Holy-Grail would work here.

If width of inside1+328px = approx 100% of the total available width, then inside2 (who normally would be forced underneath) could still be floated left and given a negative left margin of -328px so that it wraps around and appears on the other side… the right side… on top of the margin.

Problem there is, as ralph said, a % + px is always tricky. I think Holy Grail might work here because you don’t have to always take up exactly 100%, you can get away with something slightly less.


#wrapper{
width:960px; margin:0 auto;
}
#inside{
overflow: hidden;
width: 60%;
margin-right: 400px;
}
#inside img{
max-width:auto; display:block;
}
#inside2{
background-color: #FF9900;
border-radius: 0 8px 8px 0;
float: [b]left[/b];
height: 300px;
width: 320px; position:relative; z-index:5; /*320px + 8px = 328px*/
margin-left: -330px;

}
#testwrap{
width:100%; position:relative;
}

Note: you have waaaay too much “position: something” and z-indexes here.

6

I hate to suggest this, but if this layout is an absolute must, you’ll probably need to use Javascript to get it perfect.

However, you should use graceful degradation, so it still works without Javascript. Find a “good enough” approximation and then add the Javascript to get it perfect for those that have Javascript enabled.

7

no, you maybe missed my post above. I figured it out (see above) with no JS.
Rick

8

Whoops, yeah, I thought that was an attempt and missed that it worked for you