Floating probleem

**Mathijs Kingma** · 31-07-2010, 18:31

Ik ben momenteel met een nieuw project bezig en hier loop ik tegen iets vreemds, maar waarschijnlijk wel logisch aan.

Hier een voorbeeld hoe het eruit moet komen te zien:
http://bit.ly/bXQIIL

Dit hele vlak moet je zien als de wrapper: (Faux columns)

Code:

#wrapper {
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background: url(../images/wrapper.png) repeat-y #fff;
}

In dit vlak zitten 2 vlakken namelijk een sidebar en een content. (Content is variabel in de breedte.
In de sidebar staat een menu en in de content een h2 aan de linkerkant en op dezelfde lijn aan de rechterkant moet een link komen. En weer onder de h2 een intro tekst.

Sidebar/content :

Code:

#sidebar {
	width: 190px;
	padding: 20px 0 0 20px;
	float: left;
}
#content {
	margin: 20px 0 0 20px;
	float: left;
}

Echter wanneer ik de site bekijk, staat de link die normaal helemaal aan de rechterkant moet staan, maar op 1/3 van de pagina. Wanneer ik een breedte kon opgeven zou hij wel goed zijn, maar omdat de breedte variabel is kan ik dit niet doen. Zou iemand mij kunnen helpen om dit werkend te krijgen?
Ik hoop dat het zo duidelijk is.

Mvg, Mathijs Kingma

**S. van Laere** · 31-07-2010, 18:41

Een url is zoveel eenvoudiger voor ons.

**Ton van Alebeek** · 31-07-2010, 18:42

Link naar de site werkt makkelijker

Edit: S. van Laere was me voor ;)

**Henk G.** · 31-07-2010, 18:46

Een overflow in je wrapper kan voor dit probleem zorgen (niet getest) probeer die er eens in te zetten.

**Mathijs Kingma** · 31-07-2010, 18:48

Dat lijkt mij inderdaad ook -> http://bit.ly/bQIe0O

Edit:

Overflow hidden helpt niet..

**S. van Laere** · 31-07-2010, 19:12

Code:

* {
    margin: 0;
    padding: 0;
    outline: none;
}

html {
    height: 100%;
    font-size: 100%;
    background-color: #ffffff;
}

body {
    height: 100%;
    font-size: 62.5%;
    min-width: 900px;
    font-family: Arial, "Trebuchet MS", sans-serif;
    color: #000000;
    padding: 0;
    margin: 0;
}

#wrapper {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    background: url(images/sidebar.png) repeat-y #fff;
}

p {font-size: 1.1em;}


h2 {
    width: 300px;
    font-size: 2em;
    color: #333333;
}


/* Header */

/* Sidebar */
#sidebar {
    width: 190px;
    padding: 20px 0 0 20px;
    float: left;
}

ul.nav {
    list-style: none;
    margin-bottom: 15px;
}

ul.nav li {
    width: 170px;
    padding-left: 5px;
    line-height: 2.5em;
}

ul.nav li a {
    color: #333333;
    font-size: 1.2em;
    text-decoration: none;
}

ul.nav li a:hover, 
ul.nav li.active 
{
    font-weight: bold;
}

/* Content */
#content {
    width: 100%;
}

#content h2 {float: left;}
#content .options {float: right;}
.clear {clear: both;}

**Mathijs Kingma** · 31-07-2010, 19:18

@S. van Laere, bedankt voor de moeite, maar wanneer ik dit doe dan komt de <p> tekst ten hoogte van de onderkant van het linker menu.

**S. van Laere** · 31-07-2010, 19:23

HTML:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

                    
        <link rel="stylesheet" type="text/css" href="systeem_bestanden/style.css" media="screen">    
    <link href="" id="aepref-styles.css.tables.enabled"><link href="" id="aepref-styles.author.css.enabled"><link href="" id="aepref-styles.css.tags.enabled"></head><body>
        <div id="wrapper">
                <div id="sidebar">
                    <h3>Plugins</h3>
                    <ul class="nav">
                        <li class="active"><a href="#">Overzicht</a></li>
                        <li><a href="#">Plugin toevoegen</a></li>
                    </ul>        
                </div>

                <div id="content">    
                <div style="float: left; margin-left: 1em;">                
                    <h2>Plugins</h2>
                    <p>
                        Op deze pagina heb je het beheer over al je plugins.
                    </p>
                    </div>
                    <div class="options">
                        <a href="#">Plugin toevoegen</a>
                    </div>
                    <div class="clear"></div>
                </div>
        </div>
    </body>
    </html>

CSS:

Code:

* {
    margin: 0;
    padding: 0;
    outline: none;
}

body {
    height: 100%;
    font-size: 62.5%;
    min-width: 900px;
    font-family: Arial, "Trebuchet MS", sans-serif;
    color: #000000;
    padding: 0;
    margin: 0;
}

h2 {
    width: 300px;
    font-size: 2em;
    color: #333333;
}

html {
    height: 100%;
    font-size: 100%;
    background-color: #ffffff;
}

p {
    font-size: 1.1em;
}

ul.nav {
    list-style: none;
    margin-bottom: 15px;
}

ul.nav li {
    width: 170px;
    padding-left: 5px;
    line-height: 2.5em;
}

ul.nav li a {
    color: #333333;
    font-size: 1.2em;
    text-decoration: none;
}

ul.nav li a:hover, 
ul.nav li.active  {
    font-weight: bold;
}

.clear {
    clear: both;
}

/* Content */
#content {
    width: 100%;
}

#content .options {
    float: right;
}

#content h2 {
    float: left;
}

/* Header */
/* Sidebar */
#sidebar {
    width: 190px;
    padding: 20px 0 0 20px;
    float: left;
}

#wrapper {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    background: url(sidebar.png) repeat-y #fff;
}

Zelf zie ik geheel geen noodzaak voor je <div class="clear"></div>.
Die zou je er net zo goed uit kunnen laten.

**Mathijs Kingma** · 31-07-2010, 19:30

Wanneer ik de clear weghaal, komt de tekst uit de paragraaf in het midden tegen de bovenkant te staan.

**S. van Laere** · 31-07-2010, 19:36

Als IE8 nou ook nog leuk mee zou doen, maar die laat het dus weer afweten.

**Mathijs Kingma** · 31-07-2010, 20:03

Ik ga nog even wat verschillende dingen proberen, mocht het niet lukken zal ik morgen weer even om hulp vragen!
Aanvullend bericht:
Het is mij nu wel gelukt om het content gedeelte in de volle breedte te krijgen, maar vanaf het moment dat ik een float ga gebruiken komt de tekst weer ten hoogte van het einde van de sidebar.

Wat is hier tegen te doen, want ik wil wel graag floats gaan gebruiken.

**Jos van Marrewijk** · 07-08-2010, 14:17

Als je een float gebruikt helpt het meestal om dit in je css te zetten bij de betreffende div: "clear: both;".
Zonder quotes uiteraard!

Floating probleem