4 Replies - 547 Views - Last Post: 10 May 2013 - 10:19 AM

#1 jerrie  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 13-February 11

Positioning of div is wrong used a wrap

Posted 10 May 2013 - 09:12 AM

Hello guys,

I can't fix my positioning in html I used a wrap to place my div's under each other but it doesn't work correctly.



HTML

		<div id="wrap">
			
			<h1>Pizza's</h1>
			
			<div id="div1">
				
				<div id="name">
					<ul>
						<li>text</li>
						<li>text</li>
						<li>text</li>
						<li>text</li>
						<li>text</li>
						<li>text</li>
						<li>text</li>
						<li>text</li>
						<li>text</li>
						<li>text</li><li>text</li>
						<li>text</li>
						<li>text</li>
						<li>text</li>
						<li>text</li>
						<li>text</li>
						<li>text</li>
						<li>text</li>
						<li>text</li>
						<li>text</li>
					</ul>		
				</div>
				<div id="price">
					<ul>
								<li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li><li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li>
						<li>textgoodposition</li>			
					</ul>		
				</div>
		</div>
		<div id="div2">
			
			<div id="name">
				<ul>
					<li>text</li>
				<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
				</ul>		
			</div>
			<div id="price">
				<ul>
				<li>text</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
				</ul>		
			</div>
		</div>
		<div id="div3">
			<div id="name">
				<ul>
			<li>text</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
				</ul>		
			</div>
			<div id="price">
				<ul>
					<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
						<li>textwrongposition</li>
				</ul>		
			</div>
		</div>
		</div>



Css code
#wrap{
	float:left;
	width: 80%;
}

#div2, #div1, #div3 {
	width:80%;
}

#div1 ul {
	float:left;
}


#name{
	margin-top:5%;
	float:left;
}

#price{
	margin-top:5%;
	float:right;
}



screenshot of problem: http://puu.sh/2QD4d/ed804920c7.png

Thanks for all solutions guys really can't find the problem after hours of working

Is This A Good Question/Topic? 0
  • +

Replies To: Positioning of div is wrong used a wrap

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3177
  • View blog
  • Posts: 10,639
  • Joined: 12-December 12

Re: Positioning of div is wrong used a wrap

Posted 10 May 2013 - 09:34 AM

IDs must be unique on the page, so you shouldn't re-use name and price. The css for these is probably only applying to the first of these elements. Use classes instead.

This post has been edited by andrewsw: 10 May 2013 - 09:34 AM

Was This Post Helpful? 2
  • +
  • -

#3 jerrie  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 13-February 11

Re: Positioning of div is wrong used a wrap

Posted 10 May 2013 - 10:02 AM

View Postandrewsw, on 10 May 2013 - 09:34 AM, said:

IDs must be unique on the page, so you shouldn't re-use name and price. The css for these is probably only applying to the first of these elements. Use classes instead.


I tried your solution but it didn't help me out.

http://puu.sh/2QEHv/f153d07b69.png
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3177
  • View blog
  • Posts: 10,639
  • Joined: 12-December 12

Re: Positioning of div is wrong used a wrap

Posted 10 May 2013 - 10:15 AM

You are really creating a table; that is, tabulated data. I would use a table :)

I know we see advice all the time about not using tables for layout, but this doesn't mean you cannot use a table; you are not laying out the page, you are tabulating data.

View Postjerrie, on 10 May 2013 - 05:02 PM, said:

I tried your solution but it didn't help me out.

..at least it is correct :) it was incorrect before.
Was This Post Helpful? 1
  • +
  • -

#5 jerrie  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 25
  • Joined: 13-February 11

Re: Positioning of div is wrong used a wrap

Posted 10 May 2013 - 10:19 AM

lol indeed I didn't thought about that thanks for the solution

This post has been edited by Dormilich: 11 May 2013 - 03:16 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1