Div problem, CSS

2010-04-28 10:16

Permalänk

iSwordfish

Medlem

Registrerad: Maj 2006

●

Div problem, CSS

Hej Swec, inte ofta som jag måste skriva om hjälp här.. tänkte ifall någon stött på något liknande problem förut:

Det hela grundar sig i 3 Divar som har float för att ligga bredvid varandra, alla dessa ligger i en wrapper div.

<div class="mainWrapper">
    <div class="leftPanel"></div>
    <div class="middlePanel"></div>
    <div class="rightPanel"></div>
</div>

Kraven är att:

wrapper ska variera i width, %
leftPanel har okänd width (den fylls med info vartefter)
rightPanel har okänd width (den fylls med info vartefter)
middle panel ska ta upp det resterande utrymmet mellan left och rightPanel

Problemet:
Eftersom wrappern varierar i width och dom vid sidorna för stunden är av okänd width, men har width. så är denna min css:
OBS, jag har satt left och rightPanel med fasta width's för att simulera en bredd i detta fall.

.mainWrapper{ width:80%; height:500px; }
.leftPanel{ width:100px; height:100%; float: left; }
.middlePanel{ width: 70%; height:100%; float: left; }
.rightPanel{ width: 100px; height:100%; float: right; }

Det är där som det blir problem (vid width av middlePanel), sätter jag denna till ett % värde så blir det fel som i detta fall, då den täcker olika mycket av mellanrummet beroende på hur stor Wrapper är.
Om jag sätter den till ett fast värde blir det ju självklart också fel.
Och jag kan inte skippa width och fylla med info, då kommer det inte funka.

Slutsats:
Behöver något som motsvarar X:

x = mainWrapper.Width - leftPanel.Width - rightPanel.Width;

Någon hjälp?

// Swordfish

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-04-28 11:12

Permalänk

Guru Meditation

Medlem

Plats: Stockholm
Registrerad: Nov 2003

●

hade du kunna sätta fast bredd på sidodivvarna skulle allt bli oändligt mycket enklare

Visa signatur

/Mvh Stefan

Rapportera Redigera

Citera flera Citera

2010-04-28 11:21

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Det är svårt att veta hur man ska lösa detta när vi inte vet vad boxarna kommer fyllas med, om du vet objektens bredd i vänster- och högerkolumnen så kan du räkna ut dem med js. Slänger in ett snabbt exempel:

<html>
    <head>
    <style>
    html, body {margin:0; padding:0;}
    #mainWrapper{width:100%; min-width:400px;}
    #leftPanel{width:100px; float: left;}
    #middlePanel{min-width:200px; height:100%; float: left;}
    #rightPanel{width:100px; float: left;}
    </style>
    <script type="text/javascript">
        function setDivWidths()
        {
            var mainWrapperW = document.getElementById("mainWrapper").clientWidth;
            var leftPanelW = document.getElementById("leftPanel").clientWidth;
            var middlePanelW = document.getElementById("middlePanel").clientWidth;
            var rightPanelW = document.getElementById("rightPanel").clientWidth;
            
            var newWidth = mainWrapperW-(leftPanelW+rightPanelW);
            document.getElementById("middlePanel").style.width = newWidth+"px";
        }
    </script>
    
    </head>
    <body onload="setDivWidths();" onResize="setDivWidths();">
        <div id="mainWrapper">
            <div id="leftPanel">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor euismod mauris, vitae viverra tellus pretium eget. Aenean fringilla lorem at velit vulputate feugiat. Aenean ante dolor, malesuada non porta ac, sodales in purus. Quisque malesuada, sem quis iaculis imperdiet, neque sem ultrices mi, sit amet auctor augue ligula ac nibh. Nullam a nisi in odio euismod venenatis</div>
            <div id="middlePanel">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor euismod mauris, vitae viverra tellus pretium eget. Aenean fringilla lorem at velit vulputate feugiat. Aenean ante dolor, malesuada non porta ac, sodales in purus. Quisque malesuada, sem quis iaculis imperdiet, neque sem ultrices mi, sit amet auctor augue ligula ac nibh. Nullam a nisi in odio euismod venenatis.</div>
            <div id="rightPanel">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor euismod mauris, vitae viverra tellus pretium eget. Aenean fringilla lorem at velit vulputate feugiat. Aenean ante dolor, malesuada non porta ac, sodales in purus. Quisque malesuada, sem quis iaculis imperdiet, neque sem ultrices mi, sit amet auctor augue ligula ac nibh. Nullam a nisi in odio euismod venenatis </div>
        </div>
    </body>
</html>

Detta kan lika gärna göras med CSS, så skriptet måste vidareutvecklas när du vet bredden på de objekt som hamnar i vänster- och högerkolumn.

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-04-28 11:40

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Skrivet av Swordfish90:

leftPanel har okänd width (den fylls med info vartefter)
rightPanel har okänd width (den fylls med info vartefter)

... för stunden är av okänd width ...

Gå till inlägget

Menar du att sidpanelerna kommer ha en fast width på dem (i godtycklig enhet) när du fastställt vilket innehåll de ska ha, eller att de dynamiskt kommer variera i bredd när innehållet uppdateras?

edit: så länge du har en bestämd höjd på wrappern så är det faktiskt enkelt löst:

CSS:
#wrapper {height:500px; width:80%;}
#content {background:#ace; height:100%; overflow:hidden; padding:0 10px;} /* overflow:hidden för att eventuella marginaler på den inneslutna <p>-taggen inte skall kollapsa. flytande element har inte collapsing margins */
#left {background:#cea; float:left; margin-right:10px;}
#right {background:#eca; float:right; margin-left:10px;}
.sidebar {height:100%; padding:0 10px;}

HTML:
<div id="wrapper">
	<div class="sidebar" id="left">
		<p>Ooga Booga</p>
	</div>
	<div class="sidebar" id="right">
		<p>Detta är en längre mening som expanderar den högra kolumnen</p>
	</div>
	<div id="content">
		<p>Lorem ipsum dolor sit amet... Ja, detta är alltså huvudinnehållet. Ett område som tar upp all tillgänglig bredd i enlighet med display:blocks standarduppförande. De flytande elementen till vänster och höger tar den bredd de behöver och texten flödar "runt" dessa områden, men eftersom de har en fast höjd flödar aldrig texten under kolumnerna.</p>
	</div>
</div>

Et voila.
edit2: jag är en petröv.
edit3: snyggade till kod och CSS. har jag påpekat att jag är en petröv..?

Senast redigerat 2010-04-28 12:55

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2010-04-28 12:04

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Snajsigt värre! Vill man ha 100% höjd på dem så kan man ju göra det med js. För höjdpositionering av objekten i vänster- och högerkolumn i Teknocides eminenta förslag görs bra med en clear:both.

Senast redigerat 2010-04-28 12:21

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-04-28 13:14

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

updatering: Dynamisk höjd, sidebars som till synes är lika höga som huvudinnehållet. Svart magi?

CSS:
	#wrapper {overflow:hidden; width:80%;} /* overflow:hidden gör så att margin/padding i .sidebar har effekt. läs mer i kommentaren där.*/
	#content {background:#ace; overflow:hidden; padding:0 10px;}
	#left {background:#cea; float:left; margin-right:10px;}
	#right {background:#eca; float:right; margin-left:10px;}
	.sidebar {margin-bottom:-99999px; padding:0 10px 99999px;} /* en "höjdbuffer" på 99999px som klipps av till #wrapperns dynamiska höjd.*/

HTML:
<div id="wrapper">
	<div class="sidebar" id="left">
		<p>Ooga Booga</p>
	</div>
	<div class="sidebar" id="right">
		<p>Detta är en längre mening som expanderar den högra kolumnen</p>
	</div>
	<div id="content">
		<p>Lorem ipsum dolor sit amet... Ja, detta är alltså huvudinnehållet. Ett område som tar upp all tillgänglig bredd i enlighet med display:blocks standarduppförande. De flytande elementen till vänster och höger tar den bredd de behöver och texten flödar "runt" dessa områden. Sidkolumnerna görs väldigt höga tack vare en padding-bottom på 99999px som läggs till den höjd som kolumnernas innehåll automatiskt genererar. En negativ margin-bottom gör så att #wrapper klipper av överflödig höjd.</p>
	</div>
</div>

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2010-04-29 02:48

Permalänk

You

Medlem