Jump to content
Zagadka

Padding not working?

Recommended Posts

Display on the following page (relevant code displayed below): http://zagadka.net/portfolio.php

 

The primary problem is that the text in the right side divs (everything in outerDiv) sill simply not accept any padding-left, so the text lines up flush to the left side div (siteTumbnail).

 

((I had to do some inline CSS for custom colors))

	.siteThumbnail	{		float: left;		border: 5px solid;		border-color: #152434;		background-color: #152434;		width: 500px; 		height: 275px;	}	.outerDiv	{		border: 5px solid;		border-color: #152434;		border-left: 0px;		color: #152434;		height: 275px;	}	.titleBar	{		background-color: #152434;		padding: 8px;		color: #ffffff;		font-weight: bold;	}		.statusBar	{		color: #ffffff;		padding: 8px;		font-weight: bold;	}		.description	{		padding: 8px;		background-color: #ffffff;		color: #000000;		line-height:150%;		font-size: 14px;	}
<div style="margin-left: auto; margin-right: auto; width: 1100px;">	<div class="siteThumbnail" style="border-color: #D6DF20; background-color: #D6DF20;">		<a href="http://zagadka.net/portfolio/eldercareoptions/"><img src="./portfolio/images/eldercareoptions.jpg" border="0"></a>	</div>	<div class="outerDiv" style="border-color: #D6DF20;">		<div class="titleBar" style="background-color: #D6DF20; color: #000000;">			Elder Care Options (2014)		</div>		<div class="statusBar" style="background-color: #1BA239;">			Fully Functional		</div>		<div class="description">			Though this page is rather simple (developed pro bono), I have gone to pains to develop it as a "default" of sorts.<br>			It feclects simplicity, consistent design, and presentation of information. One of the rules of design is that people pay far more attention to what appears on their screen than they do what they have to scroll down to. Thus, the data on this site is dense, but clear.<br>			I also intentionally gave it a "lighter" feeling due to the nature of the topic (elder care). And also, to be honest, to break my reliance on blue color hues.		</div>	</div></div>

I've tried cramming padding-left into every div element on the page with no luck. My suspicion is that the float:left is messing things up, but I'd like some more opinions.

 

Thanks!

Share this post


Link to post
Share on other sites

The right element left edge stretches to left edge of left, either give it width and float: right; or apply margin-left until it line up to right edge of left element, then adjust padding of text.

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...