Css images float

[joanne]

Zou iemand deze CCS stylesheet willen bekijken?
Met deze sheet wil ik de tekst rechts van het plaatje hebben, en niet onderaan. Pas als de tekst
langer is, schuift deze vanzelf onderaan het plaatje.
Gaat dus alleen om de tekst rechts van het plaatje. Zoals het er nu staat, komt de tekst (uitleg enz.)
onmiddellijk onderaan het plaatje/image.
Hoe krijg ik dit voor elkaar? De echt geroutineerde CSS kenners zullen dit in 1 klap zien, denk ik,
ik niet i.i.g.

Vast dank voor de moeite.

 html, body
	{
		height: 100%;
	}
	
	body
	{
		margin: 0px;
		padding: 0px;
		background: #4C4532;
		line-height: 1.75em;
		font-family: 'Source Sans Pro', sans-serif;
		font-size: 12pt;
		font-weight: 500;
		color: #000000;
	}
	
	
	h1, h2, h3
	{
		margin: 0;
		padding: 0;
	}
	
	p, ol, ul
	{
		margin-top: 0;
	}
	
	p
	{
	}
	
	
	ol, ul
	{
		padding: 0;
		list-style: none;
	}
	
	p
	{
		line-height: 180%;
	}
	
	strong
	{
	}
	
	a
	{
		color: #383326;
	}
	
	a:hover
	{
		text-decoration: none;
	}
	
	.container
	{
		overflow: hidden;
		margin: 0em auto;
		width: 800px; /* dit stond eerst op 1000 px */
	}
	
/*********************************************************************************/
/* Image Style                                                                   */
/*********************************************************************************/

	.image
	{
		display: inline-block;
	}
	
	.image img
	{
		display: block;
		width: 100%;
	}
	
	.image-full
	{
		display: block;
		width: 100%;
		margin: 0 0 2em 0;
	}
	
	.image-left
	{
		float: left;
		margin: 0 2em 2em 0;
	}
	
	.image-centered
	{
		display: block;
		margin: 0 0 2em 0;
	}
	
	.image-centered img
	{
		margin: 0 auto;
		width: auto;
	}

/*********************************************************************************/
/* List Styles                                                                   */
/*********************************************************************************/

	ul.style1
	{
	}


/*********************************************************************************/
/* Title Styles                                                                   */
/*********************************************************************************/

	.title
	{
		padding: 0em 0em;
		margin-bottom: 3em;
	}
	
	.title h2
	{
		margin-bottom: 1em;
		text-transform: uppercase;
		font-weight: 700;
		font-size: 2em;
		color: #383326;
	}

/*********************************************************************************/
/* Social Icon Styles                                                            */
/*********************************************************************************/

	ul.contact
	{
		margin: 0;
		padding: 2em 0em 0em 0em;
		list-style: none;
	}
	
	ul.contact li
	{
		display: inline-block;
		padding: 0em 0.30em;
		font-size: 1em;
	}
	
	ul.contact li span
	{
		display: none;
		margin: 0;
		padding: 0;
	}
	
	ul.contact li a
	{
		color: #FFF;
	}
	
	ul.contact li a:before
	{
		display: inline-block;
		background: #3f3f3f;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		text-align: center;
		color: #FFFFFF;
	}
	
	ul.contact li a.icon-twitter:before { background: #2DAAE4; }
	ul.contact li a.icon-facebook:before { background: #39599F; }
	ul.contact li a.icon-dribbble:before { background: #C4376B;	}
	ul.contact li a.icon-tumblr:before { background: #31516A; }
	ul.contact li a.icon-rss:before { background: #F2600B; }

/*********************************************************************************/
/* Button Style                                                                  */
/*********************************************************************************/

	.button
	{
		display: inline-block;
		padding: 1em 3em 1em 2em;
		background: #4C4532;
		letter-spacing: 0.20em;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 0.90em;
		color: #FFF;
	}
	
	.button:before
	{
		display: inline-block;
		background: #FFC31F;
		margin-right: 1em;
		width: 40px;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		text-align: center;
		color: #272925;
	}

/*********************************************************************************/
/* 2-column                                                                      */
/*********************************************************************************/

	.tbox1,
	.tbox2
	{
		width: 575px;
	}
	
	.tbox1
	{
		float: left;
	}

	.tbox2
	{
		float: right;
	}

	#wrapper
	{
	}

/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/

	#header
	{
		position: relative;
		padding: 3em 0em;
	}

/*********************************************************************************/
/* Logo                                                                          */
/*********************************************************************************/

	#logo
	{
		position: absolute;
		top: 2em;
		left: 0;
	}
	
	#logo h1
	{
	}
	
	#logo a
	{
		text-decoration: none;
		color: rgba(255,255,255,0.9);
	}

/*********************************************************************************/
/* Menu                                                                          */
/*********************************************************************************/

	#menu
	{
		position: absolute;
		top: 2em;
		right: 0;
	}
	
	#menu ul
	{
		display: inline-block;
	}
	
	#menu li
	{
		display: block;
		float: left;
		text-align: center;
	}
	
	#menu li a, #menu li span
	{
		padding: 0.7em 1.5em;
		text-decoration: none;
		color: rgba(255,255,255,0.6);
	}
	
	#menu li:hover a, #menu li.active a, #menu li.active span
	{
		background: rgba(0,0,0,0.5);
		border-radius: 20px;
		color: rgba(255,255,255,0.8);
	}
	
	#menu .current_page_item a
	{
	}
	
	#menu .icon
	{
	}

/*********************************************************************************/
/* Banner                                                                        */
/*********************************************************************************/

	#banner
	{
	}

/*********************************************************************************/
/* Page                                                                          */
/*********************************************************************************/

	#page
	{
		overflow: hidden;
		padding: 5em 0em;
		background: #D7D4C3;
	}

/*********************************************************************************/
/* Content                                                                       */
/*********************************************************************************/

	#content
	{
	img.left { float: left; margin: 0.5em 1em 1em 0; border: 1px solid #999; clear: left; } 
	}

/*********************************************************************************/
/* Sidebar                                                                       */
/*********************************************************************************/

	#sidebar
	{
	}

/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/

	#footer
	{
	}

/*********************************************************************************/
/* Copyright                                                                     */
/*********************************************************************************/

	#copyright
	{
		overflow: hidden;
		padding: 5em 0em;
	}
	
	#copyright p
	{
		letter-spacing: 0.20em;
		text-align: center;
		text-transform: uppercase;
		font-size: 0.80em;
		color: rgba(255,255,255,0.3);
	}
	
	#copyright a
	{
		text-decoration: none;
		color: rgba(255,255,255,0.6);
	}


	.box
	{
		background: #F0EFE9;
		margin-bottom: 2em;
	}
	
	.box .margin-btm
	{
/*		margin-bottom: 2em; */
		 
	}
	
.box .details
	{
		display: block;
		padding: 1em 2em 1em 2em;
		 
	}

 

[Tha Devil]

Normaliter is dat een kwestie van een float: left; toepassen op de afbeelding.

Het is nogal lastig de situatie enkel op basis van CSS te moeten inschatten, heb je de pagina online staan?

 

[joanne]

Hoi, ben er denk ik uit.
Het origineel is DEZE, waarvan ik css heb aangepast voor 1 kolom en die ik dus
hier heb geplakt.

Heb op de sheet de oude image styles (vanaf regel 71, verwijderd en heb deze vervangen met dit:

.floatright
{
float: right;
margin: 10px 10px 0px 0px;
border: 1px solid #666;
padding: 2px;
}

Deze wijsheid heb ik gehaald uit MAX DESIGN Handige tutorial iig.

Ook heb ik bij container op regel 62 overflow: hidden; verwijderd. Anders kwam de tekst nog niet naast de tekst.. ondanks aanpassing bij imagestyle.
Waar het mij om ging, de tekst komt nu i.i.g. naast het plaatje (links of rechts) en niet eronder.

Thx voor het meedenken.

Zal de site nog wel hier publiceren, de proefsite dan.