Goeie morgen,

Ik zit met het volgende te stoeien. De volgende HTML code is aanwezig:

<div class="tablenav top">

<div class="alignleft actions">

<select name="action">

<input id="doaction" class="button action" type="submit" value="Uitvoeren" name="">

</div>

<div class="alignleft actions">

<label class="screen-reader-text" for="new_role">Rol wijzigen naar…</label>

<select id="new_role" name="new_role">

<input id="changeit" class="button" type="submit" value="Bijwerken" name="changeit">

<label class="screen-reader-text" for="bbp-new-role">Change forum role to…</label>

<select id="bbp-new-role" style="display:inline-block; float:none;" name="bbp-new-role">

<input id="bbp-change-role" class="button" type="submit" value="Change" name="bbp-change-role">

</div>

</div>

Ervanuit gaande dat dat we de HTML niet kunnen veranderen, enkel de CSS, hoe krijg ik deze twee DIV's naast elkaar? Op het moment komen ze onder elkaar. Ze hebben op het moment de volgende CSS aanwezig:

div.tablenav div.alignleft {

display: block;

margin-left: 0;

padding: 0;

position: relative;

top: -65px;

}
.tablenav {

height: 30px;

margin: 6px 0 4px;

vertical-align: middle;

width: 800px;

}




Iemand suggesties?
Alvast bedankt.

Als je een div {display: block;} meegeeft pakt hij in principe de hele breedte van de bovenliggende div. Een eigenschap van {display : block;} is namelijk dat er geen ander element op dezelfde regel mag staan.

Maak van die {display: block;} eens {display: inline-block;} of {float: left; display: inline;}. Werkt dat wel?

.tablenav {
height: 30px;
margin: 6px 0 4px;
width: 800px;
}

div.tablenav div.alignleft {
float: left;
width: 350px;
}

Niet te moeilijk denken. Wil je daarna nog een div toevoegen die op de volgende regel komt, gebruik dan clear: both; Dat heft de voorgaande float: left op.

DIV.nieuwe_div {
clear: both;
}

div.tablenav div.alignleft {
float: left;
width: 50%;
}

dan vult hij helemaal op, let wel padding moet 0 zijn en geen border das toch 1px teveel dan

Helaas werken geen van alle genoemde suggesties....

Voor de kenners, het gaat om de boxen boven ''all users" of "all posts" in wordpress (admin).

Ik vind de oplossing met display:inline-block; mooier dan de float.

helaas, werkt ook niet....

dan zal tablenav geen float hebben waarschijnlijk

Ik zou niet weten waarom niet


Bij display:inline-block mag er geen white-space tussen de div's zitten.
Aangezien je zegt de html niet te kunnen veranderen zul je denk ik voor float:left; moeten gaan.
Daarnaast is je HTML in je OP niet helemaal valid, daarom heb ik in de voorbeelden de inhoud van de div's leeggemaakt.

of je selector is onjuist :

div.tablenav div.alignleft

check even met background:red; bv.

probeer .alignleft even puzzelen denk ik,

Helaas, werkt nog steeds niet.

De broncode is terug te vinden in Wordpress bij 'all users'.

25,00 euro (exc btw) oplossings loon voor diegene die dit kan fixen! (testen met firebug met printscreen en de benodigde CSS code volstaat)!

Alvast bedankt,
Sven

Je bent de WordPress admin aan het aanpassen? Dan ben je hopelijk goed voorbereid op toekomstige updates van WordPress ;).

Verder snap ik absoluut niet waar je het over hebt.
Als ik bij mijn WordPress sites kijk naar het stukje waar je het over hebt, staan de desbetreffende boxes al naast elkaar..
Dus post even een afbeelding van wat je nou precies bedoeld en hoe je het wilt hebben.

Origineel gepost door Marcel Melis

Als je een div {display: block;} meegeeft pakt hij in principe de hele breedte van de bovenliggende div. Een eigenschap van {display : block;} is namelijk dat er geen ander element op dezelfde regel mag staan.

Maak van die {display: block;} eens {display: inline-block;} of {float: left; display: inline;}. Werkt dat wel?

Een div draagt standaard display: block;

.alignleft {
width: 50%;
float: left;
}

Moet voldoende zijn. Stuur me anders even de live URL, ik kan het sowieso voor je fixen. Anders gebruik maken van CSS3 met :first-child, :last-child en/of :nth-child.

http://jsfiddle.net/5Ut6j/ .. Kan je nog een margin-top: -60px aan toevoegen eventueel.

Een andere manier, ken je deze plugin om custom blokken in de WP Admin te maken? http://wordpress.org/plugins/wp-custom-cms-block/