CSS: 2 columns: 1 variabel width, 1 fixed width?

vrijdag 3 februari 2012 01:05

Acties:

0 Henk 'm!

Topicstarter

Sinds kort heb ik een domeinnaam geregistreerd waarop ik een persoonlijke website/blog wil plaatsen. Als hobbyist ben ik nu bezig een eenvoudig HTML/CSS template te maken. Met oog op verschillende schermgrootte/resolutie met de hedendaagse apparaten (PC's, laptops, tablets) wil ik gebruik maken van variabele afmetingen binnen CSS.

Het idee wat ik wil uitwerken is als volgt:
Afbeeldingslocatie: http://nielssanders.nl/template.jpg

Afbeeldingslocatie: http://nielssanders.nl/template.jpg

Kort gezegd: één containerDIV met daarin (naast een header, navbar en footer) een hoofdgedeelte, waar mijn posts in komen, en rechts een bar met individuele items (social media links, een slider etcetera).
Het hoofdgedeelte (mainbar) wil ik hierbij een variabele width geven (met een max- en min-width). Dit zodat de site er op verschillende apparaten/resoluties hetzelfde uit blijft zien. Het is de bedoeling dat de mainbar en sidebar ten alle tijden naast elkaar blijven staan (dus geen wrapping).

Zoals zo vaak zal de oplossing vrij eenvoudig zijn. Maar na dagen proberen en googelen wend ik me nu toch tot de professionals

. Ik hoop dat jullie mij verder kunnen helpen.

HTML:

<body>
<div id="container">
    <div id="header"></div>
    <div id="navbar"></div>
    <div id="mainbar"><p>mainbar</p></div>
    <div id="sidebar"><p>sidebar</p></div>
</div>
</body>

Cascading Stylesheet:

#body {
    margin: 0;
    padding: 0;
    background-color: #FFF;
}
#container {
    background-color: #CCC;
    min-width: 1000px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
}
#header {
    display: block;
    width: auto;
    height: 120px;
    background-color: #09C;
    margin-bottom: 6px;
}
#navbar {
    display: block;
    width: auto;
    height: 40px;
    background-color: #F03;
    margin-bottom: 6px;
    clear: both;
}
#mainbar {
    float: left;
    background-color: #0C6;
    min-width: 606px;
    max-width: 806px;
    width: auto;
    height: 400px;
    margin: 0 14px 0 0;
    padding: 0;
}
#sidebar {
    float: right;
    background-color: #66C;
    height: 100px;
    width: 360px;
    margin: 0;
    padding: 0;
}
#footer {
    display:;
    float: left;
    margin-top: 6px;
    background-color: #9CC;
    height: 40px;
    width: auto;
}

[ Voor 5% gewijzigd door MueR op 03-02-2012 11:55 ]

vrijdag 3 februari 2012 01:17

Acties:

0 Henk 'm!

alex3305

Probeer eens bij de footer sowieso een display: block; te geven en daarna een clear: both;, dan worden de floats leeggemaakt, zodat de browser weet dat het daar afgesloten moet worden. Althans dat is mijn kennis hierover

.

Verder kun je natuurlijk kijken op CSSPlay. Een goede site met veel referenties.

vrijdag 3 februari 2012 08:19

Acties:

0 Henk 'm!

Tentacle1

60% Puur Sap!

Je kan de eerste kolom een margin-right van 380px oid geven en de rechterkolom absoluut rechts positioneren. Als je wilt dat beide kolommen er altijd even hoog uit komen te zien, zal je de faux techniek moeten gebruiken.

System specs

vrijdag 3 februari 2012 08:29

Acties:

0 Henk 'm!

Verwijderd

Het hoofdgedeelte (mainbar) wil ik hierbij een variabele width geven (met een max- en min-width). Dit zodat de site er op verschillende apparaten/resoluties hetzelfde uit blijft zien. Het is de bedoeling dat de mainbar en sidebar ten alle tijden naast elkaar blijven staan (dus geen wrapping).

Met dit in het achterhoofd, waarom geef je dan een max width op ?
IMO is het eenvoudiger om alleen een minimal width op te geven, en een maximum als percentage (evt de container in een andere div plaatsen die bijv. 10% van de randen van het venster af zitten). Als je daarnaast de fixed div hebt en de mainbar een minimal width meegeeft is het probleem opgelost.

Mocht je inderdaad willen dat je mainbar zich aanpast aan de venstergrootte, dan moet je geen minimal width opgeven en alleen een percentage.

vrijdag 3 februari 2012 11:27

Acties:

0 Henk 'm!

DeEindbaas

Hoi Niels,

Dit wil je als het goed is:
http://jsfiddle.net/TFwAH/embedded/result/

En hier de code die ik gebruikt heb:
http://jsfiddle.net/TFwAH/

[ Voor 6% gewijzigd door DeEindbaas op 03-02-2012 11:31 ]

vrijdag 3 februari 2012 11:58

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Niels:
Allereerst welkom op het forum

Ik heb je post even voorzien van code tags en wat overbodige spullen verwijderd. Zou je in het vervolg willen letten op onze Quickstart en het lokale beleid in het forum? Vooral bij het posten van code zien we graag een uitgeklede testcase online. Daarbij zien we ook graag dat je de code in het topic beperkt tot het minimaal noodzakelijke. Dat maakt het voor ons makkelijker om je te helpen. Daarnaast is er minder kans dat je topic op slot gaat, want grote code-dumps hebben al gauw de schijn van luiheid.

Anyone who gets in between me and my morning coffee should be insecure.

vrijdag 3 februari 2012 18:44

Acties:

0 Henk 'm!

NielsSanders

Topicstarter

@MueR: thx voor de aanpassing. Zal er voortaan op letten

@Dreamwire: Inderdaad, jouw voorbeeld is zoals ik 't wil. Ik heb er naar gekeken en kan dit wel vertalen naar mijn eigen site / afmetingen. Maar begrijpen, dat doe ik nog niet helemaal. Kun je me uitleggen waarom jouw wrapper met 100% width - met daarin een nieuwe DIV met de benodigde marge - werkt, én dat daarnaast de sideDIV past zonder dat deze ín de wrapper bevindt? (Zoals ik bedacht had zorg de 100% width zorgt ervoor dat er géén ruimte meer is voor een andere div?)
Of anders gezegd; waarom werkt mijn manier niet?

In ieder geval thanks!

vrijdag 3 februari 2012 20:42

Acties:

0 Henk 'm!

shappie

Ik denk dat het volgende voorbeeld wat duidelijker is:
http://jsfiddle.net/H8CCc/

Met negatieve margins werken e.d. is volgens mij niet nodig in dit geval. Als ik een simpele layout met kolommen en variabele width wil maken gebruik ik altijd de bovenstaande methode, en tot nu toe weinig problemen mee gehad.

Zoals je wel ziet is de code heel basic, dus als je wat padding/margin e.d. rond je content wilt hebben kun je dit zelf toevoegen, is gelijk een goede oefening! Verder raad ik je aan eens wat tutorials op te zoeken over CSS en HTML. En uit eigen ervaring weet ik dat je het vooral leert door het veel te doen.

Succes!

vrijdag 3 februari 2012 23:43

Acties:

0 Henk 'm!

NielsSanders

Topicstarter

@Shappie: inderdaad, jouw code is erg makkelijk. Tot zover zal ik hem gebruiken in mijn eigen template. Verder is het zo dat ik regelmatig met HTML/CSS gewerkt heb. En hierbij altijd mijn antwoorden vind op het net. Alleen met dit probleem kwam ik er niet uit. Vandaar dat ik me toch meld bij de pro's hier op tweakers

. thx!

zaterdag 4 februari 2012 21:03

Acties:

0 Henk 'm!

SvMp

Ik zat kort geleden met hetzelfde probleem.

Zelf geprobeerd, kwam er ook niet uit.

Ik heb mijn design opgebouwd aan de hand van dit uitstekende voorbeeld: http://matthewjamestaylor...umn-right-menu-pixels.htm

Voordeel aan dit voorbeeld is de eenvoud en dat het werkt op alle (moderne) browsers, zelfs IE 6.

[ Voor 27% gewijzigd door SvMp op 04-02-2012 21:04 ]

vrijdag 10 februari 2012 12:25

Acties:

0 Henk 'm!

NielsSanders

Topicstarter

@ScMp: deze methode (en andere tutorials van deze man) heb ik ook gevonden. Ik zal hem spoedig eens proberen.

Is bij jou toevallig bekend of de menubalk rechts (col2 (right)) ook op 100% height kan? Dus dat de menubalk blijft doorlopen ongeacht of er ook content in staat?

Onderwerpen