~ overflow ~

Problem:

It’s like a industry standard now having everthing tableless, although i still thinking that EVERYTHING is too much, this been like the motto of many programmers around. But let’s skip the blablaing about this and go straight to the point:

You have 2 fixed width div/li `rows` on a site, they are nested and inside the content, due the complex nature of the layout, there’s some other complications. All of sudden the client decides that he wants to ruin your layout adding a long, waaaaaaaaay long, horizontal listing, which not also overlapps the width of your left column but mostly like will make user’s screen to horizontally scroll.

Solution:

As much i like to discuss with client, it’s useless and i will be just wasting my time. This is also a tricky thing to fix since the column sizes are fixed, i would need to make the whole content column bigger, ruining the rest of the top elements. Let’s take a look on the example:

<div style=”width:600px”>

content div header code here

<div style=”width:2000px”>

way long client designed div to ruin layouts

</div>

</div>

(styles are just to simplifly)

so the solution (1) would be something like this:

<div style=”width:600px”>

content div header code here

<div style=”width:2000px;position:absolute;“>

way long client designed div to ruin layouts

</div>

<img src=”blank_image.gif” width=1 height=same height as the long width div>

</div>

solution (2), if your abomination div is also height dynamic:

<div style=”width:600px” id=”container”>

content div header code here

<div style=”width:2000px;position:absolute;” id=”abomination”>

way long client designed div to ruin layouts

</div>

</div>

<script type=”text/javascript”>

// after loading all the content of the abomination div, also assuming that you’re using jquery

$(“#container”).height(parseFloat($(“#abomination”).height()+50)+”px”);

</script>