Probleme mit dem CSS-Boxmodell bei divs

[Frank85]

Hallo zusammen,

ich versuche schon seit etwas längerem etwas beim Boxmodell zu verstehen und hab leider keine Ahnung, wie ich das Problem effektiv lösen kann.

Ich habe ein div, in welchem ich zwei weitere divs nebeneinander anordnen will.
Das erste soll 20% breit sein, das zweite 80%.
Nun möchte ich allerdings, dass das zweite zusätzlich noch einen border von einem Pixel bekommt.
Allerdings reicht dann der Platz nicht mehr aus und er stellt die beiden divs untereinander dar.

Gibt es eine Möglichkeit, die beiden divs trotzdem nebeneinander anzuordnen?

Grüße
Frank

 

[Körnerbrötchen]

Einfachste Möglichkeit:

<div style="width:80%">Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.</div>
<div style="width:20%;">
 <div style="width:100%; border:1px solid black;">
  Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.
 </div>
</div>

 

[Frank85]

Ja, das ist mir bekannt gewesen trotzdem danke ich dir.

Gibt es denn eine andere Möglichkeit ohne ein zusätzliches div?

Grüße
Frank

 

[prm]

So wie von Körnerbrätchen vorgeschlagen geht das nicht. Da werden ja die Div's untereinander angeordnet.

Du kannst aber auch Rahmen, Innenabstände (padding) und Außenabstände (margin) ebenfalls in Prozent angeben. Dann musst du lediglich darauf achten, dass du nach dem Boxmodell auf die 100% und nicht daruber kommst.
Siehe dieses Beispiel: Dreispaltiges Layout mit flexiblen Breiten

Allerdings haben solche flexiblen layouts auch Nachteile: Bei zu breiten Viewports werden die Textzeilen sehr lang und erfordern ein hohes Maß an Konzentratioin beim Lesen.
In den Text eingebundene Grafiken können auch sehr unterschiedlich dargestellt werden.
Du kannst das z.B. auf dieser Seite feststellen, indem du die Fenstergröße variierst: Perspektivteam TV-Ruchheim - Ein Handballteam mit Perspektiven
Ich bevorzuge deshalb mittlerweile fixe Layouts. Die sind in der Darstellung kalkulierbar und sehen dann auch überall gleich aus, auch wenn man ggf. scrollen muss. Hier ein Beispiel für ein fixes Layout: Dreispaltiges Layout, zentriert mit fixen Breiten

 

[neuroleptika]

Mit border-width: 1px; sollen meistens Haarlinen erzeugt werden.
Bei prozentuellen Angaben geht dieser Effekt verloren.
Border und padding in px sollten nicht mit width in % kombiniert werden.
Das funktioniert nur im IE(quirks-mode) und im IE5.x(win)
Trenne border und witdh:
html

<div id="boxen">
<div id="box1">
<p>box1</p>
</div>
<div id="box2">
<div id="box2_innen">
<p>box2<br /> mit Border</p>
</div>
</div>
<hr />
</div>

css

#boxen {
background-color: #B0B0B0;
}

/*layout für IE 5 bis IE 6*/
* html #boxen {
height: 1%;
}
/*layout für IE7*/
* +html #boxen {
min-height: 1%;
}

#box1 {
float: left;
width: 20%;
}

#box2 {
float: left;
width: 80%;
}

#box2_innen {
border: 1px solid black;
}

/*clearen*/
hr {
clear: both;
height: 0;
border: none;
visibility: hidden;
}

/*hr im IE5-IE7 ausblenden*/
* html hr {
display: none;
}

* +html hr {
display: none;
}

Das hr könntest du einsparen (google: clearfix after).
Oder du verwendest ein leeres <br /> zum clearen (Dann könntest du auf layout für IE verzichten)

Anstelle des Borders würde sich auch eine Grafik anbieten (google: faux collumns).
Ein umschließendes Element (#boxen) brauchst du auf jeden Fall. Es sei denn du möchtest nicht clearen.