Div's naast elkaar zelfde hoogte

					TBForum nu ook op je mobiel! Klik hier voor meer info en gratis link...

Div's naast elkaar zelfde hoogte

Forum: Scripting en webdesign	Eerste bericht: 22 jul 2010 14:33	Bekeken: 870 x
Op watchlist: 1 x	Laatste bericht: 25 jul 2010 00:43	Posts/dag: 5,0

Vorige | 1 | 2 | Volgende

1 - 10 van 12

Roy M., Particulier

22 jul 2010 14:33

Ik heb 5 div's naast elkaar staan. Als ik nu een lap tekst in b.v. de 2e div zet rekt hij alleen die 2e div uit naar beneden. Nu wil ik dus dat hij alle 5 de div's meerekt qua hoogte. Ik heb dit al eens eerder gedaan maar kom er niet meer uit. Ik hoop dat iemand kan helpen!

.content_container {
width:1600px;
text-align:center;
background-image:url(img/container_bg.jpg);
background-repeat:repeat-y;
}
#content_1 {
width:276px;
background-image:url(img/img_26.jpg);
float:left;
}
#content_2 {
width:255px;
background-image:url(img/img_27.jpg);
float:left;
}
#content_3 {
width:558px;
background-image:url(img/img_28.jpg);
float:left;
}
#content_4 {
width:263px;
background-image:url(img/img_29.jpg);
float:left;
}
#content_5 {
width:248px;
background-image:url(img/img_30.jpg);
float:left;
}

<div class="content_container">
<div id="content_1"> </div><div id="content_2">Hier komt het menu</div><div id="content_3"></div><div id="content_4">En hier de links !</div><div id="content_5"> </div>
</div>

Post #1

Richard O., Particulier

22 jul 2010 14:46

Google op Faux columns

Post #2

Roy M., Particulier

22 jul 2010 15:41

Ik ben al een tijdje bezig nu maar ben er bijna, maar nog niet helemaal. De div's rekken nu mooi mee, alleen als je de tekst in div 2 hebt en dan de tekst in div3. De tekst in div3 komt dan wel op de goede plaats te staan alleen kwa hoogte precies zonder die van div2. Hoe kan ik er nu nog voor zorgen dat alles wel netjes op de zelfde hoogte komt ? Heb even een screenshot bijgevoegd voor de duidelijkheid !

.content_container {
width:1600px;
background: url(img/content_container_bg.gif);
}
#content_1 {
width:276px;
}
#content_2 {
width:255px;
margin-left:276px;
background-image:url(img/img_27.jpg);
}
#content_3 {
width:558px;
margin-left:531px;
background-image:url(img/img_28.jpg);
overflow:hidden;
}
#content_4 {
width:263px;
margin-left:1089px;
background-image:url(img/img_29.jpg);
}
#content_5 {
width:248px;
margin-left:1352px;
}

<div class="content_container">
<div id="content_1"> </div><div id="content_2">Hier komt het menu<br />Hier komt het menu<br />Hier komt het menu<br /></div><div id="content_3">Lorem ipsum dolor sit amet</div><div id="content_4">En hier de links !</div><div id="content_5"> </div>
</div>

(Log in om link te zien!)

Post #3

Rishi B., Roxic Multimedia

22 jul 2010 19:02

Ik gebruik altijd een simpel javascriptje.

<head><script type="text/javascript">
function rek_uit(){

var links = document.getElementById('left')
var rechts = document.getElementById('right')

var linksHoog = links.offsetHeight;
var rechtsHoog = rechts.offsetHeight;

linksHoog > rechtsHoog ? rechts.style.height=linksHoog+"px" : links.style.height=rechtsHoog+"px"
}
</script>
</head>

<body onLoad="rek_uit()">

Post #4

Roy M., Particulier

22 jul 2010 22:00

Zou het liever zonder javascript doen, dit moet toch ook kunnen ? Ik snap niet echt waarom het op dit moment niet werkt ?!

Post #5

Job Harmsen, Blue Moving

23 jul 2010 15:09

Divs weten van elkaar niet hoe hoog ze zijn, tenzij jij de hoogte definieert. Via het bovenstaande javascriptje kun je de divs wel laten weten hoe hoog ze zijn, dus javascript is bijna onvermijdbaar in deze situatie.

Post #6

I. van Zon, Particulier

23 jul 2010 16:09

Onzin, gewoon faux columns gebruiken en je probleem is opgelost, het is niet noodzakelijk om hier javascript voor te gebruiken. Handig is een tweede, maar een mooie oplossing is het niet.

Post #7

Roy M., Particulier

24 jul 2010 00:57

Ja maar het probleem is dat zoals ik het nu heb dit al zoals via Faux is. Zou niet weten wat ik nu anders moet doen om dit te fixen ?!

Post #8

S. Ghillebaert, Particulier

24 jul 2010 11:51

@Rishi:
Wat dan als de rechtermenu de ene keer groter en de andere keer kleiner is dan de linker, dan valt deze tekst buiten mijn div (ik heb het zelf geprobeerd, aangezien ik hier ook naar op zoek was)?

Ik werk namelijk zelf met een inklapbaar menu, vandaar dat het de ene keer langer is dan de content en de andere keer niet...

Aangepast op 24-07-2010 11:56 door S. Ghillebaert

Post #9

Rishi B., Roxic Multimedia

24 jul 2010 12:05

@Stijn, dan moet je gewoon in je JS-menu weer de actie rek_uit() aan roepen.. Lijkt me niet al te ingewikkeld..

Post #10

Vorige | 1 | 2 | Volgende

Opmerking
Dit topic is gesloten omdat er langer dan een maand niet meer in is gepost.
Om toch een bijdrage te leveren aan deze discussie kun je een nieuw onderwerp openen en verwijzen naar deze pagina (http://www.tbforum.com/thread/148959.html)

TBForum

Inloggen

Discussies

Vraag en aanbod

Off-topic forums

Opmerking