Scarletts: Divs nebeneinander, außen abschneiden

Hi,

ich möchte drei Divs nebeneinander haben und die beiden äußeren sollen abgeschnitten werden können. Die Idee dahinter: Der mittlere Bereich dient für eine 1024x768 Auflösung und der äußere Bereich als Erweiterung für bis zu 1280x768px. Von daher soll er abgeschnitten werden, denn es sollen keine (!) Scrollbalekn und Scrollmöglichkeiten (overflow: hidden) benutzt werden können, bei 1024x768 (bei kleinerer Auflösung schon, aber nicht bis zum äußeren Bereich).

Bisher habe ich:

<body>  
  
<div id="wrapper">  
	<div id="head_left"></div>  
  
	<div id="head_m"></div>  
	  
	<div id="head_right"></div>  
</div>  
  
</body>
body {  
	margin: 0px;  
	font-family: Helvetica, sans-serif;  
	color: #FFFFFF;  
	background: #000000;  
	font-size: 12pt;  
}  
  
#wrapper {  
	width: 997px;  
	margin: 0 auto 0 auto;  
}  
  
#head_left {  
	float: left;  
	background-image: url(images/head_left.jpg);  
	background-repeat: no-repeat;  
	height: 270px;  
	width: 139px;  
	position: relative;  
	margin-left: -139px;  
}  
  
#head_m {  
	float: left;  
	background-image: url(images/header.jpg);  
	background-repeat: no-repeat;  
	height: 270px;  
	width: 997px;  
}  
  
#head_right {  
	float: right;  
	background-image: url(images/head_right.jpg);  
	background-repeat: no-repeat;  
	height: 270px;  
	width: 139px;  
	position: relative;  
	margin-right: -139px;  
}

Soll btw alles zentriert sein.

Bisher klappt es soweit, dass alles nebeneinander ist, aber wenn ich den Browser kleiner mache, dann erscheint ein Scrollbalken, wo er noch nicht erscheinen dürfte.

Was soll ich tun? Bin überfragt. Will alles ohne Tabellen lösen.

  1. hallo,

    ich möchte drei Divs nebeneinander haben und die beiden äußeren sollen abgeschnitten werden können. Die Idee dahinter: Der mittlere Bereich dient für eine 1024x768 Auflösung und der äußere Bereich als Erweiterung für bis zu 1280x768px. Von daher soll er abgeschnitten werden, denn es sollen keine (!) Scrollbalekn und Scrollmöglichkeiten (overflow: hidden) benutzt werden können, bei 1024x768 (bei kleinerer Auflösung schon, aber nicht bis zum äußeren Bereich).

    Vielleicht hilft dir dieses Thema, der OP hatte ein ganz ähnliches Problem.

    grüße,
    henman

    --
    "Sir! We are surrounded!" - "Excellent! We can attack in any direction!"
  2. Mir hat es leider nicht allzu weit geholfen. Aber danke.

  3. Hallo Scarletts,

    ich möchte drei Divs nebeneinander haben und die beiden äußeren sollen abgeschnitten werden können. Die Idee dahinter: Der mittlere Bereich dient für eine 1024x768 Auflösung und der äußere Bereich als Erweiterung für bis zu 1280x768px.

    Und was passiert bei einer Viewport-Größe von 855x768 oder 1026x932Pixeln?

    Dehrlich gesagt hört sich das recht seltsam an und ich möchte bezweifeln, dass es sinnvoll ist - vielleicht sagst du etwas zu den Hintergründen, dann findet sich ein unter Umständen besserer Lösungsansatz.

    Falls nciht: ermittel die Größe des Desktops oder des Viewports per JavaScript und readier dann entsprechend...

    Gruß,

    Marc

    1. Das ganze geht mit Divs, das weiß ich. Dazu brauche ich kein JS, denn ich bin strikt dagegen. ;)

      Bei einer Größe von <1024 px Breite wird ein Scrollbalken für diesen Bereich angezeigt.

      1. 'ǝɯɐu$ ıɥ

        Das ganze geht mit Divs, das weiß ich. Dazu brauche ich kein JS, denn ich bin strikt dagegen. ;)

        Bei einer Größe von <1024 px Breite wird ein Scrollbalken für diesen Bereich angezeigt.

        Ich hoffe es sieht auch bei einer Auflösung >2000 noch gut aus, ich sehe sehr viele Webseiten die bei solchen Auflösungen irgendwie furchtbar wirken; der Content kauert dann entweder schüchtern und verschreckt in der linken oberen Ecke oder wirkt in der Mitte des Viewports so hilflos ausgeliefert wie ein kleine Katze im Bitbullzwinger.

        ssnɹƃ
        ʍopɐɥs

        --
        I like children. If they're properly cooked.
        - W.C. Fields
        1. Vorerst wird die Webseite für eine Auflösung von maximal 1280x768 px angepasst und minimal 1024x768px.
          Ich weiß momentan halt nur nicht weiter mit den Divs... Als Tabelle ist sowas einfacher.