What would cause a div to ignore CSS positioning?

  • (2 Pages)
  • +
  • 1
  • 2

21 Replies - 1963 Views - Last Post: 28 July 2015 - 01:06 PM

#1 Ty Meador   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 166
  • Joined: 23-May 11

What would cause a div to ignore CSS positioning?

Posted 28 July 2015 - 09:48 AM

I have a very simple HTML document (I'm using it to lay out an element in a bigger project). I have tried relative, absolute, static, and fixed position properties. Basically i would like to two divs to be right beside one another. but bot left: and right: are ignored completely. (JuniorSen and SeniorSen are the ones I want to be beside one another)
<!DOCTYPE html>
<head>
	<style>
	#overlay{
		visibility: visible;
		position: absolute;
		left: 0px;
		top: 0px;
		width:100%;
		height:100%;
		text-align:left;
		z-index: 1000;
		opacity:1.0;
	}

	#overlay div{
		width:50%;
		height: 50%;
		overflow: auto;
		margin: 0px auto;
		background-color: #fff;
		border:1px solid #000;
		padding:15px;
		text-align:left;
		opacity:1.0;
	}
	
	#overlayContent div{
		width: 40%;
		height: 40%:
		border 1px solid #000;
	}
	
	.seniorSen{
		position:relative;
		left: 0px;
	}
	
	.juniorSen{
		position:relative;
		right: 0px;
	}
	</style>
</head>

<body>
	<div id="overlay">
		<div id="overlayContent">
			<div id="SeniorSen" class="SeniorSen">
				<img id="seniorSenPic" src="https://www.govtrack.us/data/photos/300072-100px.jpeg" alt="">
				<p class="picLabel">Senior Senator</p>
			</div>
			
			<div id="JuniorSen" class="JuniorSen">
				<img id="juniorSenPic" src="https://www.govtrack.us/data/photos/412492-100px.jpeg" alt="">
				<p class="picLabel">Junior Senator</p>
			</div>
		</div>
	</div>	
</body>

This post has been edited by Ty Meador: 28 July 2015 - 09:49 AM


Is This A Good Question/Topic? 0
  • +

Replies To: What would cause a div to ignore CSS positioning?

#2 Martyr2   User is online

  • Programming Theoretician
  • member icon

Reputation: 5337
  • View blog
  • Posts: 14,229
  • Joined: 18-April 07

Re: What would cause a div to ignore CSS positioning?

Posted 28 July 2015 - 10:01 AM

Well remember they are divs which mean they are block elements that stack on top of one another. What you need to do is set the width of each div so that side by side they will still have a width less than the container (in this case 'overlayContent") and then you can float them left.

So for example if overlayContent was a width of 200, you could set each senator block to have a width of 90px and then float them left and they will sit in line. But if each block was 100px (which together is 200 before you add your padding and borders) it will be wider than the overlayContent parent and they will break back to separate lines even if they are floated. Get the idea?

Just make sure that the math lines up and be sure to always take into account padding, borders and margins when calculating your widths.

To give you an example, set each senator box to be a width of 20%. Then add a float: left; to them. You should see them smack right up in line together.

:)

P.S. Another option is to make each div with a style of 'display: inline-block;' and again make the widths fit inside their container's width.

This post has been edited by Martyr2: 28 July 2015 - 10:02 AM

Was This Post Helpful? 1
  • +
  • -

#3 andrewsw   User is offline

  • awks lol ffs
  • member icon

Reputation: 6693
  • View blog
  • Posts: 27,471
  • Joined: 12-December 12

Re: What would cause a div to ignore CSS positioning?

Posted 28 July 2015 - 10:05 AM

Also note that your page is missing the required html and title tags.

I will also add that #overlay div affects all three divs within #overlay. Consider whether you need #overlayContent at all. One div directly inside another (and ending at the same place) is rarely necessary.

This post has been edited by andrewsw: 28 July 2015 - 10:07 AM

Was This Post Helpful? 1
  • +
  • -

#4 Ty Meador   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 166
  • Joined: 23-May 11

Re: What would cause a div to ignore CSS positioning?

Posted 28 July 2015 - 10:25 AM

View PostMartyr2, on 28 July 2015 - 11:01 AM, said:

To give you an example, set each senator box to be a width of 20%. Then add a float: left; to them. You should see them smack right up in line together.

:)/>

P.S. Another option is to make each div with a style of 'display: inline-block;' and again make the widths fit inside their container's width.

I tried both of these options and neither one worked. They both just stack right on top of one another here's the code
<!DOCTYPE html>
<head>
	<style>
	#overlay{
		visibility: visible;
		position: absolute;
		left: 0px;
		top: 0px;
		width:100%;
		height:100%;
		text-align:left;
		z-index: 1000;
		opacity:1.0;
	}

	#overlay div{
		width:50%;
		height: 50%;
		overflow: auto;
		margin: 0px auto;
		background-color: #fff;
		border:1px solid #000;
		padding:15px;
		text-align:left;
		opacity:1.0;
	}
	
	#overlayContent div{
		width: 20%;
		height: 40%:
		border 1px solid #000;
	}
	
	.seniorSen{
		display:inline-block;
		position:relative;
		float:left;
	}
	
	.juniorSen{
		display:inline-block;
		position:relative;
		float:left;
	}
	</style>
</head>

<body>
	<div id="overlay">
	<!--Consider Removing the Nested Divs-->
		<div id="overlayContent">
			<div id="SeniorSen" class="SeniorSen">
				<img id="seniorSenPic" src="https://www.govtrack.us/data/photos/300072-100px.jpeg" alt="">
				<p class="picLabel">Senior Senator</p>
			</div>
			
			<div id="JuniorSen" class="JuniorSen">
				<img id="juniorSenPic" src="https://www.govtrack.us/data/photos/412492-100px.jpeg" alt="">
				<p class="picLabel">Junior Senator</p>
			</div>
		</div>
	</div>	
</body>

Was This Post Helpful? 0
  • +
  • -

#5 Martyr2   User is online

  • Programming Theoretician
  • member icon

Reputation: 5337
  • View blog
  • Posts: 14,229
  • Joined: 18-April 07

Re: What would cause a div to ignore CSS positioning?

Posted 28 July 2015 - 10:30 AM

Figured you might say that... it is why we are so good here at DIC.

http://jsfiddle.net/fdobj6jf/

Example to tinker with.
Was This Post Helpful? 1
  • +
  • -

#6 Ty Meador   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 166
  • Joined: 23-May 11

Re: What would cause a div to ignore CSS positioning?

Posted 28 July 2015 - 10:32 AM

Indeed you all are amazing. I just don't understand how this works I suppose. I want them both on the top. One on the left padding and one on the right padding. On the .juniorSen I've tried using right:0px; float: right; what am I doing wrong here?

This post has been edited by Dormilich: 28 July 2015 - 10:40 AM

Was This Post Helpful? 0
  • +
  • -

#7 Ty Meador   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 166
  • Joined: 23-May 11

Re: What would cause a div to ignore CSS positioning?

Posted 28 July 2015 - 10:37 AM

View Postandrewsw, on 28 July 2015 - 11:05 AM, said:

Also note that your page is missing the required html and title tags.

I will also add that #overlay div affects all three divs within #overlay. Consider whether you need #overlayContent at all. One div directly inside another (and ending at the same place) is rarely necessary.

This is by design. It is required in the bigger project as this is actually a model popup dialog. I'm creating the design separately now that I have the popup logic working. This is going to be the template and I'll fill the innerhtml and attributes with javascript so the popup is dynamic
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw   User is offline

  • awks lol ffs
  • member icon

Reputation: 6693
  • View blog
  • Posts: 27,471
  • Joined: 12-December 12

Re: What would cause a div to ignore CSS positioning?

Posted 28 July 2015 - 10:39 AM

CSS is case sensitive. seniorSen is not the same as SeniorSen. Same for junior.

Why is #overlay absolutely positioned? This positioning should be used rarely, and not in an attempt to fix layout issues.
Was This Post Helpful? 1
  • +
  • -

#9 Ty Meador   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 166
  • Joined: 23-May 11

Re: What would cause a div to ignore CSS positioning?

Posted 28 July 2015 - 10:42 AM

View Postandrewsw, on 28 July 2015 - 11:39 AM, said:

CSS is case sensitive. seniorSen is not the same as SeniorSen. Same for junior.

Why is #overlay absolutely positioned? This positioning should be used rarely, and not in an attempt to fix layout issues.

again, because this is a small piece of a much larger project. All I'm designing is a popup dialog. This is hidden by default until the user clicks an option. In which case I will populate this template and show it. Also, thank you for the case sensitive comment. It was a complete "gotcha" on my part. I completely overlooked that the id was SeniorSen and the css was seniorSen. thanks bud!
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw   User is offline

  • awks lol ffs
  • member icon

Reputation: 6693
  • View blog
  • Posts: 27,471
  • Joined: 12-December 12

Re: What would cause a div to ignore CSS positioning?

Posted 28 July 2015 - 10:47 AM

Oh right, I forgot that. Absolute makes sense for a pop-up ;)
Was This Post Helpful? 1
  • +
  • -

#11 Ty Meador   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 166
  • Joined: 23-May 11

Re: What would cause a div to ignore CSS positioning?

Posted 28 July 2015 - 11:10 AM

View Postandrewsw, on 28 July 2015 - 11:47 AM, said:

Oh right, I forgot that. Absolute makes sense for a pop-up ;)/>/>

Not a problem. However I didn't like using the #overlay div to apply the CSS to everything. So I changed the CSS to the following code
<!DOCTYPE html>
<head>
	<style>
	#overlay{
		visibility: visible;
		position: absolute;
		left: 0px;
		top: 0px;
		width:100%;
		height:100%;
		text-align:left;
		z-index: 1000;
		opacity:1.0;
	}

	#overlay div{
		width:50%;
		height: 50%;
		overflow: auto;
		margin: 0px auto;
		background-color: #fff;
		border:1px solid #000;
		padding:15px;
		text-align:left;
		opacity:1.0;
	}
	
	.seniorSen, .juniorSen{
		display:inline-block;
		width:40%;
		height:40%;
	}
	
	.seniorSen{
		float:left;
	}
	
	.juniorSen{
		float:right;
	}
	
	.rep{
		width:100%;
	}
	</style>
</head>

<body>
	<div id="overlay">
		<div id="overlayContent">
			<div id="seniorSen" class="seniorSen">
				<img id="seniorSenPic" src="https://www.govtrack.us/data/photos/300072-100px.jpeg" alt="">
				<h4 id="seniorSenName">Brett Guthrie</h4>
				<p class="picLabel" id="seniorSenPicLabel">Senior Senator</p>
			</div>
			
			<div id="juniorSen" class="juniorSen">
				<img id="juniorSenPic" src="https://www.govtrack.us/data/photos/412492-100px.jpeg" alt="">
				<p class="picLabel" id="juniorSenPicLabel">Junior Senator</p>
			</div>
			
			<div id="rep" class="rep">
				<img id="repPic" src="https://www.govtrack.us/data/photos/400431-100px.jpeg" alt="">
				<p id="repPicLabel" src="" alt="">Representative</p>
			</div>
		</div>
	</div>	
</body>

But now they are floated correctly, but they are not sized in relation to the parent div. (I checked my case first thing this time! lol) The result is that one div is floated left and one right, but they are so wide that they are on top of one another.

This post has been edited by Ty Meador: 28 July 2015 - 11:11 AM

Was This Post Helpful? 0
  • +
  • -

#12 andrewsw   User is offline

  • awks lol ffs
  • member icon

Reputation: 6693
  • View blog
  • Posts: 27,471
  • Joined: 12-December 12

Re: What would cause a div to ignore CSS positioning?

Posted 28 July 2015 - 11:24 AM

#overlay div has higher specificity than just .seniorSen so its CSS rules take precedence. #overlay .seniorSen would overrule the settings of #overlay div.

I would remove the CSS of #overlay div (and, as mentioned, removed overlayContent entirely if possible). You have CSS for #overlay, and can format the elements within it; using #overlay div is confusing the issue.

You are still missing the html tag and title. But perhaps you are just posting a fragment of the HTML(?).

This post has been edited by andrewsw: 28 July 2015 - 11:28 AM

Was This Post Helpful? 1
  • +
  • -

#13 Ty Meador   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 166
  • Joined: 23-May 11

Re: What would cause a div to ignore CSS positioning?

Posted 28 July 2015 - 11:48 AM

That helped out a LOT. But I can't seem to get the "rep" box to move vertically. I want it to be the width of the parent div, but have a small gape between it and the two senators above it. However, right now the rep box is right up against the senators boxes. (I promise I'm not trying to get you all to do my work for me.) I've been having trouble with positioning in CSS ever since I started web development. Even with the clusterLuck of languages I've had to learn, PHP, HTML, SQL, Javascript, CSS, XML, the one thing I can't seem to understand Is positioning in CSS. And I'm not talking about just the CSS keyword "position: relative|absolute|static" ect. I mean placing an object on the screen at a certain place. I'll be going fine and then I'll get one element (like these) that won't respond to any of the CSS I'm writing. Any good beginner documentation on how to position stuff on the screen VIA CSS? lol

<!DOCTYPE html>
<html>
	<head>
		<style>
		#overlay{
			visibility: visible;
			position: absolute;
			left: 0px;
			top: 0px;
			width:100%;
			height:100%;
			text-align:left;
			z-index: 1000;
			opacity:1.0;
		}

		#overlay div{
			width:50%;
			height: 50%;
			overflow: auto;
			margin: 0px auto;
			background-color: #fff;
			border:1px solid #000;
			padding:15px;
			text-align:left;
			opacity:1.0;
		}
		
		#overlay .seniorSen, #overlay .juniorSen{
			display:inline-block;
			width: 40%;
			height:40%;
		}
		
		#overlay .seniorSen{
			float: left;
		}
		
		#overlay .juniorSen{
			float: right;
		}
		
		#overlay .rep{
			display: block;
			
			width: 94%;
			margin: 0 auto;
		}
		</style>
	</head>

	<body>
		<div id="overlay">
			<div id="overlayContent">
				<div id="seniorSen" class="seniorSen">
					<img id="seniorSenPic" src="https://www.govtrack.us/data/photos/300072-100px.jpeg" alt="">
					<h4 id="seniorSenName">Brett Guthrie</h4>
					<p class="picLabel" id="seniorSenPicLabel">Senior Senator</p>
				</div>
				
				<div id="juniorSen" class="juniorSen">
					<img id="juniorSenPic" src="https://www.govtrack.us/data/photos/412492-100px.jpeg" alt="">
					<p class="picLabel" id="juniorSenPicLabel">Junior Senator</p>
				</div>
				
				<div id="rep" class="rep">
					<img id="repPic" src="https://www.govtrack.us/data/photos/400431-100px.jpeg" alt="">
					<p id="repPicLabel" src="" alt="">Representative</p>
				</div>
			</div>
		</div>	
	</body>
</html>

This post has been edited by andrewsw: 28 July 2015 - 12:13 PM
Reason for edit:: Removed previous quote, just press REPLY

Was This Post Helpful? 0
  • +
  • -

#14 andrewsw   User is offline

  • awks lol ffs
  • member icon

Reputation: 6693
  • View blog
  • Posts: 27,471
  • Joined: 12-December 12

Re: What would cause a div to ignore CSS positioning?

Posted 28 July 2015 - 12:16 PM

You need to give #overlay .rep a margin-top, but it will be ignored because it is not clearing the floats above it. One way to persuade this margin to be honoured is to change it to display: inline-block.

I still say that you are overcomplicating it by having overlayContent directly inside overlay and add CSS to #overlay div, but it is obviously your decision.

There are lots of tutorials if you search "css positioning". I can't think offhand of one in particular to recommend, but perhaps this one:

Learn CSS Positioning in Ten Steps

There are lots of good tutorials though. My personal opinion is that it is not generally the quality of tutorials that is at issue, it is that it requires time and experimentation to understand positioning properly. My honest opinion ;)

People underestimate CSS. It can be challenging and takes time to master :)

My approach, and recommendation, is to use as little HTML and CSS as possible. Add only CSS that you need, and remove rules that you realise that you don't need. People have a tendency to throw CSS rules at a problem until it works. They don't then take the time to remove redundant rules, which makes things more complicated when they need to modify it later. [This is general advice, I'm not targeting you in particular ;) ]

Note that you do not have to quote the previous post, there is a Reply button further down the page.

This is a good article:

CSS Positioning 101 :alistapart
Was This Post Helpful? 1
  • +
  • -

#15 Ty Meador   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 166
  • Joined: 23-May 11

Re: What would cause a div to ignore CSS positioning?

Posted 28 July 2015 - 12:16 PM

By changing it to display:inline-block; and trying both top:15px; margin-top:15px; nothing has changed. The reason there are two divs inside one another is for the popup dialogue that this will be. I use it in javascript to determine whether the user clicked inside the popup box or outside. Also, I'm VERY big on efficiency/minification Once I get a document the way I want it I go through and remove all debugging procedures and CSS rules I don't need. Then I minify the CSS and JS ( I then save this copy to a different version with _minified appended to the name, so that I still have a human readable version available)

This post has been edited by Ty Meador: 28 July 2015 - 12:24 PM

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2