[CSS] inline-block geeft problemen.

[Eswip]

Ik heb twee problemen..

1. Ik maak gebruik van inline-block, maar om de een of andere reden schijnt hij ergens een margin in te voeren, terwijl margin overal op 0 staat.
2. Een div wil maar niet goed alignen, hij wil niet bovenaan in de div tevoorschijn komen.

Een afbeelding voor de verduidelijking:



Je ziet de ruimte tussen groene en de gele rechthoeken. Verder is er ook een ruimte tussen het gele blok en de div die daar omheen zit (De blauwe lijn).

Verder wil de groene div niet omhoog.

De html:

code:

<div id="content">
        
    <div id="content2">
    <div id="wide">
        Hier komt dan een welkom text enzo!<br /><br />Nog meer text
    </div>
        
    </div>
    <div id="side">
        &nbsp;          
   </div>
</div>

En de css:

code:

#content {
    border-color: #4249ff;
    border-width: 1px;
    border-style: solid;
    margin: 0px;
    padding: 0px;
}

#content2 {
    margin-right: 0px;
    margin-left: 0px;
    position: relative;
    border-color: #49ff2d;
    border-width: 1px;
    margin-bottom: auto;
    margin-top: 0px;
    border-style: solid;
    padding: 0px;
    display: inline-block;
    width: 482px;
}

#wide {
    margin-top: 0px;
    margin-bottom: auto;
    padding: 5px;
}

#side {
    border-color: #ffb92f;
    border-width: 1px;
    border-style: solid;
    padding: 0px;
    margin: 0px;
    height: 500px;
    width: 250px;
    display: inline-block;
}

Ieman enig idee hoe ik dit kan oplossen? Ik wordt er een beetje gek van..

Btw, een vertical-align: top; voor de content div heeft ook geen zin..

ps. ja ik heb al veel gezocht, maar kon voor deze problemen niks vinden.. zonder andere layouts helemaal uit elkaar te slopen

[Verwijderd]

welke browser? inline-block is zeer matig geimplementeerd

[Eswip]

Verwijderd schreef op donderdag 21 juni 2007 @ 15:01:
welke browser? inline-block is zeer matig geimplementeerd

In safari.. Heb het zo nog niet getest met andere browser.. maar als iets anders dan inline-block werkt, mag dat ook... Alleen als een inline div groeit, dan groeit de div daar omheen niet mee.. en dat moet dus wel gebeuren

[Verwijderd]

in FF en IE ziet het er anders uit dan op je screenshot (is die soms met een camera gemaakt? haha)

groen zit links boven en en oranje er recht onder.

in FF zie ik in firbug ook geen inline block staan in de css, het ziet er zo uit:

#content2 {
border:1px solid #49FF2D;
margin:0px 0px auto;
padding:0px;
position:relative;
width:482px;}

misschien moet je daarvanaf

[ Voor 42% gewijzigd door Verwijderd op 21-06-2007 16:19 ]

[Eswip]

Verwijderd schreef op donderdag 21 juni 2007 @ 16:16:
in FF en IE ziet het er anders uit dan op je screenshot (is die soms met een camera gemaakt? haha)

groen zit links boven en en oranje er recht onder.

in FF zie ik in firbug ook geen inline block staan in de css, het ziet er zo uit:

#content2 {
border:1px solid #49FF2D;
margin:0px 0px auto;
padding:0px;
position:relative;
width:482px;}

misschien moet je daarvanaf

Maar hoe moet ik het dan doen zonder inline-block?

Edit: Even geprobeerd met inline.. maar dan komt de text helemaal niet in de div te staan, en de gele div komt dan eronder..

Ik kan ze wel naast elkaar krijgen, maar dan moet ik een float gebruiken, waardoor de div die er omheen zit niet meegroeit, en dat moet wel..

[ Voor 18% gewijzigd door Eswip op 21-06-2007 17:09 ]

[Boelie-Boelie]

Ik snap niet precies wat je wilt bereiken... Wil je twee kolommen naast elkaar, met een achtergrond die doorloopt tot de onderkant van die kolommen? Dan #content2 en #side floaten binnen #content en vervolgens clearen met overflow:hidden op #content. Wil je #wide bovenin #content2? Dan gewoon geen CSS-properties voor #wide declareren...

[Eswip]

Boelie-Boelie schreef op donderdag 21 juni 2007 @ 18:16:
Ik snap niet precies wat je wilt bereiken... Wil je twee kolommen naast elkaar, met een achtergrond die doorloopt tot de onderkant van die kolommen? Dan #content2 en #side floaten binnen #content en vervolgens clearen met overflow:hidden op #content. Wil je #wide bovenin #content2? Dan gewoon geen CSS-properties voor #wide declareren...

You are my hero..

Ik wist dat niet van die overflow.. thnx ALOT


edit: Hmmzzz, alleen nog 1 klein probleempje.. in de #side div moet een div komen die wat over de zijkant moet vallen van #side...

Het gaat om deze layout: http://www.fairmedia.nl/layouts/tommycats6.jpg

De content div is zo breed als het "papier".. je ziet dat het "blaadje" van de tourdates er iets overheen hangt, en de paperclip ook.. hoe krijg ik die nu goed? Het werkt niet om hem buiten de div te gooien en dan position: absolute; mee te geven, aangezien de site gecentreerd is..

[ Voor 31% gewijzigd door Eswip op 21-06-2007 18:52 ]

[Eswip]

Even een kleine bump...

Hmmzzz, alleen nog 1 klein probleempje.. in de #side div moet een div komen die wat over de zijkant moet vallen van #side...

Het gaat om deze layout: http://www.fairmedia.nl/layouts/tommycats6.jpg

De content div is zo breed als het "papier".. je ziet dat het "blaadje" van de tourdates er iets overheen hangt, en de paperclip ook.. hoe krijg ik die nu goed? Het werkt niet om hem buiten de div te gooien en dan position: absolute; mee te geven, aangezien de site gecentreerd is..

[Boelie-Boelie]

De grap van die layout is dat je denkt dat de div ophoudt bij de rand van het papier, maar dat de div (en bijbehorende background) eigenlijk doorloopt tot het eind van het stuk papier dat uitsteekt (m.a.w. breder is dan je denkt). Dus geen extra div die 'er overheen valt' en ook geen extra stukje background.

[XangadiX]

titel fix

[Eswip]

Boelie-Boelie schreef op vrijdag 22 juni 2007 @ 15:49:
De grap van die layout is dat je denkt dat de div ophoudt bij de rand van het papier, maar dat de div (en bijbehorende background) eigenlijk doorloopt tot het eind van het stuk papier dat uitsteekt (m.a.w. breder is dan je denkt). Dus geen extra div die 'er overheen valt' en ook geen extra stukje background.

??? ik volg je niet helemaal..

[Boelie-Boelie]

Ik bedoel dat je de background bijv. als volgt in vlakken kunt indelen: