float left DIV and center in the same row

Page 1 of 1

8 Replies - 685 Views - Last Post: 23 November 2012 - 10:22 AM

#1 Jay0830  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 01-June 10

float left DIV and center in the same row

Posted 20 November 2012 - 12:06 PM

I was trying to do this
Posted Image

I used float:left to make the first Image and other 3 images in the same line.
but How to make these 3 images in center, and first Image to be left?

Thanks for help..
Is This A Good Question/Topic? 0
  • +

Replies To: float left DIV and center in the same row

#2 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 83
  • View blog
  • Posts: 113
  • Joined: 14-October 12

Re: float left DIV and center in the same row

Posted 20 November 2012 - 12:20 PM

Do you mean something like this? If so, list div1 as your first and it'll be the left-most.

CSS

#container {width: 650px; height: 200px; margin: 0 auto}
#div1 {width: 650px;height:200px;border: 1px solid black}


HTML
 <div id="container">
		<div id="div1">
		<img src="image.png" />
		<img src="image.png" />
		<img src="image.png" />
		</div>
	</div>


edit: okay, I read that wrong and thought you meant aligning divs. Updating code accordingly

This post has been edited by IJET: 20 November 2012 - 12:26 PM

Was This Post Helpful? 1
  • +
  • -

#3 Jay0830  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 01-June 10

Re: float left DIV and center in the same row

Posted 20 November 2012 - 01:29 PM

View PostIJET, on 20 November 2012 - 12:20 PM, said:

Do you mean something like this? If so, list div1 as your first and it'll be the left-most.

CSS

#container {width: 650px; height: 200px; margin: 0 auto}
#div1 {width: 650px;height:200px;border: 1px solid black}


HTML
 <div id="container">
		<div id="div1">
		<img src="image.png" />
		<img src="image.png" />
		<img src="image.png" />
		</div>
	</div>


edit: okay, I read that wrong and thought you meant aligning divs. Updating code accordingly

it's different from my question. sorry about my poor English.

the HTML look like this:
 <div id="container">
<div id="div1"><img src="image1.png"/></div>
		<div id="div2">
		<img src="image.png" />
		<img src="image.png" />
		<img src="image.png" />
		</div>
	</div>


I want the "div1" to be left-most, and div2 to the center

This post has been edited by Jay0830: 20 November 2012 - 01:30 PM

Was This Post Helpful? 0
  • +
  • -

#4 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 83
  • View blog
  • Posts: 113
  • Joined: 14-October 12

Re: float left DIV and center in the same row

Posted 20 November 2012 - 01:34 PM

Had it right the first time before my edit, kind of. Fiddle with the following:

#container {width: 1050px; height: 200px;margin: 0 auto}
#div1 {width: 200px;height:200px;float:left;border: 1px solid black;margin-right: 200px}
#div2 {width: 600px;height:200px;float:left;border: 1px solid black;}




<div id="div1">
<img src="image.png" />
</div>
<div id="div2">
<img src="image.png" />
<img src="image.png" />
</div>


edit:: I decided to take another look at what you mentioned in your original post. I think I understand it a little better and I think I have misunderstood what you've asked so far. Can you post what you already have in HTML/CSS so far and I'll go off of that?

What you can do is apply a margin-right property to div1 which would push any content to the right of div1 a set distance as long as you know the width of the parent container.

Check picture of what code above does:
http://i45.tinypic.com/i6i0ck.png

This post has been edited by IJET: 20 November 2012 - 02:42 PM

Was This Post Helpful? 1
  • +
  • -

#5 Jay0830  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 01-June 10

Re: float left DIV and center in the same row

Posted 20 November 2012 - 02:40 PM

Thanks for your answer IJET.

I don't know the width, because I set the parent's width as 100%;
Was This Post Helpful? 0
  • +
  • -

#6 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 83
  • View blog
  • Posts: 113
  • Joined: 14-October 12

Re: float left DIV and center in the same row

Posted 20 November 2012 - 02:43 PM

You'll need to post your HTML and CSS for this.

This post has been edited by IJET: 20 November 2012 - 03:11 PM

Was This Post Helpful? 1
  • +
  • -

#7 Jay0830  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 58
  • Joined: 01-June 10

Re: float left DIV and center in the same row

Posted 20 November 2012 - 03:06 PM

Thanks IJET, I found the answer.

This is my original code
<head>
<style>
#container{
display:inline-block;
height:100px;
margin:0px auto;
border:1px solid black;
}
#div1{
float:left;

}
#div2{
float:left;
}
</style>
</head>
<body>

<div id="container">
<div id="div1">
<img src="profile.png"/>
</div>
<div id="div2">
<img src="function1.PNG"/>
<img src="function2.PNG"/>
<img src="function3.PNG"/>

</div>
</div>
</body>


inline-block would make "margin:0px" auto not work.
so I gave the container a height
and move div1 out of container

<head>
<style>
#container{
width:400px;
height:100px;
margin:0px auto;
border:1px solid black;
}
#div1{
float:left;

}
#div2{
float:left;
}
</style>
</head>
<body>
<div id="div1">
<img src="profile.png"/>
</div>
<div id="container">

<div id="div2">
<img src="function1.PNG"/>
<img src="function2.PNG"/>
<img src="function3.PNG"/>

</div>
</div>
</body>


then everything works.
the "div1" now is left-most and div2 is center.

Thanks for your help IJET.
Thanks again
Was This Post Helpful? 0
  • +
  • -

#8 Rpgmaster  Icon User is offline

  • New D.I.C Head

Reputation: -8
  • View blog
  • Posts: 12
  • Joined: 22-November 12

Re: float left DIV and center in the same row

Posted 22 November 2012 - 10:17 PM 

<head>
<style>
#container{
display:inline-block;
height:100px;
margin:0px auto;
border:1px solid black;
}
#div1{
float:left; width:100px;

}
#div2{
float:center; width:100px;
}
</style>
</head>
<body>

<div id="container">
<div id="div1">
<img src="profile.png"/>
</div>
<div id="div2">
<img src="function1.PNG"/>
<img src="function2.PNG"/>
<img src="function3.PNG"/>

</div>
</div>
</body>


inline-block would make "margin:0px" auto not work.
so I gave the container a height
and move div1 out of container

<head>
<style>
#container{
width:400px;
height:100px;
margin:0px auto;
border:1px solid black;
}
#div1{
float:left;

}
#div2{
float:left;
}
</style>
</head>
<body>
<div id="div1">
<img src="profile.png"/>
</div>
<div id="container">

<div id="div2">
<img src="function1.PNG"/>
<img src="function2.PNG"/>
<img src="function3.PNG"/>

</div>
</div>
</body>

Was This Post Helpful? 0
  • +
  • -

#9 DiscimusVivere  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 35
  • Joined: 16-October 12

Re: float left DIV and center in the same row

Posted 23 November 2012 - 10:22 AM

Try this code. May be it help your problem.
<head>
<style>
#container{

height:100px;
margin:0px auto;
border:3px solid green;
}
#div1{
border:solid red 1px;
display:inline-block;
float:left;
}
#div2{
text-align:center;
}
</style>
</head>
<body>
<div id="div1">
<img src="h.PNG" width="100px"/>
</div>
<div id="container">

<div id="div2">
<img src="h.PNG" width="100px"/>
<img src="h.PNG" width="100px"/>
<img src="h.PNG" width="100px"/>

</div>
</div>
</body>

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1