Due div sulla stessa riga

Vorrei inserire due div sulla stessa riga ma quello di destra è più basso di quello di sinistra...

index.php

Codice:

---

...
    <div id="content">
            <div id="left">
                    <p>bbbbbbbbbbbbbbbbbbbb</p>
                </div>
                <div id="right">
                    <?php include('include/intro.php'); ?>
                </div>
    </div>
...

---

css

Codice:

---

...
#content {
    width:1000px;
        height: auto;
        margin:auto;
        overflow: hidden;
        background-color:#FDD5EA;
}
#left{
        float:left;
        width:300px;
        border-style:solid;
}
#right {
    float:right;
        width:700px;
        border-style:solid;
}
...

---

Fai così:

Codice HTML:

---

    <div id="content">
        <div id="left">
                    <p>bbbbbbbbbbbbbbbbbbbb</p>
        </div>
        <div id="right">
                    <?php include('include/intro.php'); ?>
        </div>
        <br clear="all" />
    </div>

---

CSS:

Codice:

---

#content {
    width:1000px;
        margin:auto;
        overflow: hidden;
        background-color:#FDD5EA;
}
#left{
        float: left;
        width: 300px;
        border-style: 1px solid black;
}
#right {
        width:700px;
        border-style: 1px solid black;
}

---

La parte flottante, va scritta prima dell'elemento fisso, in modo che appunto "flotti".

#right non ha bisogno di float, al massimo gli assegni sempre float left, dato che stai assegnando anche una grandezza fissa a tutti e due :wink:

Con <br clear="all" /> invece impedisci che ci siano elementi a destra e sinistra di un elemento, quindi il div contenitore prendere automaticamente la grandezza del div più grande al suo interno :wink:

Non c'è altra soluzione al <br clear="all" /> ?

<div style="clear:both"> ;)

Ma attualmente il div contenitore prende già le dimensioni del più grande...
EDIT: ho caricato su www.tryhere.altervista.org la pagina su cui sto lavorando, c'è qualche problema con firefox ma soprattutto con internet explorer...

Citazione:

---

Originalmente inviato da bluster

<div style="clear:both"> ;)

---

Inutile, avresti molti più caratteri e dovresti metterci un contenuto al suo interno, altrimenti sarebbe un tag vuoto.

Cosa ti cambia avre un break? Dopo tutto servono a quello :???:

Se indicassi il problema che hai con i browser potremmo aiutarti :wink:

Il problema (che si può vedere su www.tryhere.altervista.org) è che con firefox il div di destra non parte proprio dall'alto ma un po più giù. Con internet explorer addirittura parte da dove finisce quello di sinistra.

Perchè hai il border esterno, che occupa spazio.

Con IE si vede così perchè la somma dei div da il risultato uguale alla grandezza del div generale, ed essendoci i bordi, come detto, che fanno spazio e "rubano" qualche pixel lo vedi così.

Prova a mettere 3 pixel in meno ai <div> contenuti e vedrai che si vedrà bene pure con IE :wink:

Con IE va proprio sotto, non sono i bordi.

E ti sto dicendo che è per lo spazio, dato che non ci sta nello spazio rimanente lo manda a capo, te lo dico perchè capita pure a me:

IE
http://www.postimage.org/Pq1I9vkA.jpg

Firefox
http://www.postimage.org/aV1JlEJ9.jpg

Ti dico che ho tolto 25px ma il problema è rimasto...

Citazione:

---

Originalmente inviato da tryhere

Ti dico che ho tolto 25px ma il problema è rimasto...

---

Non l'hai detto :???:

Allora prova ad assegnare un float a #right :wink:

Con ie rimane il problema di prima, con firefox mi sballa tutta la pagina