3 Replies - 6277 Views - Last Post: 05 March 2012 - 04:07 PM

#1 Boyan  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 254
  • Joined: 09-September 07

Image and text "inside" a box?

Posted 05 March 2012 - 02:33 PM

Hello guys,

I have a problem that I'm trying to solve all evening.

I'm trying to position four boxes, each with a small image, title and description in it.

Something that will look like this (but with rounded corners - border-radius):

Posted Image

Instead, I got something like this:

Posted Image

I'm not sure what might be the problem, tried changing the margin and padding, still no results. And when the text on the right comes? Would be even worse.

Here's the markup:

		<section>
			<div id="box">
			<h2>Title</h2>
			<img src="images/meni1.png" />
			<p></p>
			</div>
		
			<div id="box">
			<h2>Title2</h2>
			<p></p>
			</div>
	
			<div id="box">
			<h2>Title3</h2>
			<p></p>
			</div>
		
			<div id="box">
			<h2>Title4</h2>
			<p></p>
			</div>
			
		</section>	


And the CSS on the box. No style is used on section.

#box {
	float: left;
	height: 100px;
	width: 350px;
	margin: 20px;
	padding: 10px;
	border: solid;
	border-radius: 10px;
	background: #000;
}


I need some guidance and help here. A million thanks in advance. :)

Is This A Good Question/Topic? 0
  • +

Replies To: Image and text "inside" a box?

#2 Valkerion  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 265
  • Joined: 13-January 09

Re: Image and text "inside" a box?

Posted 05 March 2012 - 02:54 PM

Hi there! Try to separate your

<div id="box">


into two columns like this for example

<div id="box">
 <div id="picture">
    <img src="images/meni1.png" />
 </div>
 <div id="text">
    Title 1
 </div>
</div>



Now the box div is a container. Put the image inside the <div id="picture">

At your CSS float them left and see the outcome

This post has been edited by Valkerion: 05 March 2012 - 02:57 PM

Was This Post Helpful? 2
  • +
  • -

#3 Boyan  Icon User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 254
  • Joined: 09-September 07

Re: Image and text "inside" a box?

Posted 05 March 2012 - 03:37 PM

It's perfect. Thank you so much, helped me a lot. :)
Was This Post Helpful? 0
  • +
  • -

#4 Valkerion  Icon User is offline

  • D.I.C Regular

Reputation: 5
  • View blog
  • Posts: 265
  • Joined: 13-January 09

Re: Image and text "inside" a box?

Posted 05 March 2012 - 04:07 PM

Great!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1