Trouble with margins and padding in div next to floated div

This site is best viewed in a modern browser with JavaScript enabled.

Trouble with margins and padding in div next to floated div

evenstar7139

I don't seem to have any control over margin-left and padding-left in inner_content. It jams the div and content up against inner_data. I want a 2px margin between them and for inner_content to have a left padding of 6px

CSS:
.wrapper {
width: 600px;
margin: 0 auto;
background: #432b13;
text-align: center;
padding: 2px;
border-radius: 6px;
}
.wrapper_title {
color: #dacea4;
padding: 3px;
font-weight: bold;
}
.inner_data
{
text-align: right;
font-weight: bold;
float: left;
width: 20%;
background: #956f4f;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 6px;
border-radius: 6px;
margin-top: 2px;
}

.inner_content
{
text-align: left;
background: #dacea4;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
margin-top: 2px;
border-radius: 6px
}

HTML:
<div class="wrapper">
<div class="wrapper_title">
Bank Account Information
</div>

<div class="inner_data">
Balance
</div>
<div class="inner_content">
<?php print number_format($bank_balance)?> DRP
</div>

<div class="inner_data">
Interest Rate
</div>

<div class="inner_content">
5%
</div>

</div>

The attachments of this post were removed during the platform migration in 2018

Sup3rkirby

Please use some form of a code tag when pasting source code.

There are a couple things you could do to resolve this. The easiest solution would be to alter your padding-left value. Because the .inner_data class is using float: left; it gives you this lovely situation. Basically, while your padding is set to 20px in the .inner_content class, it cannot pad 20 pixels from the right side of your .inner_data element because it is floating. I'm probably not the best person to explain how float affects element placement since I only know what it can do but not necessarily why. Long story short, you have to adjust the padding to match the width of your .inner_data elements (with a little extra to keep it from being too close). Setting the padding-left to 22% seems to work just fine.

Another solution would be to get rid of the float: left; and instead adjust your HTML and CSS to a new format that would also give you the same result but without weird padding adjustments for floating elements. Something like below:

<!DOCTYPE html>
<head>
	<title>Padding/Margin Test</title>
<style type="text/css">
.wrapper {
  width: 600px;
  margin: 0 auto;
  background: #432b13; 
  text-align: center;
  padding: 2px;
  border-radius: 6px;
}
.wrapper_title {
  color: #dacea4;
  padding: 3px;
  font-weight: bold;
}
.inner_data {
  text-align: right;
  font-weight: bold;
  display: inline-block;
  zoom: 1;
  *display: inline;
  width: 20%;
  background: #956f4f;
  margin-right: 4px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 6px;
  border-radius: 6px;
}

.inner_content {
  text-align: left;
  background: #dacea4;
  padding: 0px;
  margin-top: 2px;
  border-radius: 6px	
}
</style>
</head>
<body>

<div class="wrapper">
<div class="wrapper_title">
Bank Account Information
</div>

<div class="inner_content">
  <div class="inner_data">
    Balance
  </div>
  54,000 DRP
</div>



<div class="inner_content">
  <div class="inner_data">
    Interest Rate
  </div>
  5%
</div> 

</div>

</body>
</html>

Basically, I've played your .inner_data elements inside of the .inner_content elements and then removed the float. This allows them to properly affect other things also inside of the .inner_content elements. I also set the display to inline-block and as a fix for IE8 and below I had to add zoom: 1; and *display: inline;. Those two attributes are only handled by IE so it doesn't affect the other browsers. The margin-top was removed as it wasn't needed and the margin-right was also added to help IE space your text so that it is not touching your inner elements.

evenstar7139

Thanks for the reply. I implemented your suggestions and the padding part of the problem is fixed. However, there is still no space between the medium brown and the tan sections. Here, I photoshopped you an example: http://i22.photobucket.com/albums/b306/evenstar7139/css_example.gif

Sup3rkirby

I see, I wasn't aware you also wanted to space those two elements out in that manor. In this case you'd want to go back to the original element placement (not placing the .inner_data inside of the .inner_content elements). Then you'd want to set both elements to use the inline-block stylings (both with fixes for IE8 and earlier) and then just make a few adjustments to properly set the widths accordingly to end up with something like:

<!DOCTYPE html>
<head>
	<title>Padding/Margin Test</title>
<style type="text/css">
.wrapper {
  background: #432b13; 
  text-align: center;
  width: 600px;
  margin: 0px auto;
  padding: 2px;
  border-radius: 6px;
}
.wrapper_title {
  color: #dacea4;
  font-weight: bold;
  padding: 3px;
}
.inner_data {
  background: #956f4f;
  text-align: right;
  font-weight: bold;
  width: 116px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  margin-right: 1px;
  padding: 3px 4px;
  border-radius: 6px;
}

.inner_content {
  background: #dacea4;
  text-align: left;
  width: 460px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  margin-top: 2px;
  padding: 3px 4px;
  border-radius: 6px	
}
</style>
</head>
<body>

<div class="wrapper">
<div class="wrapper_title">
Bank Account Information
</div>

<div class="inner_data">
  Balance
</div>
<div class="inner_content">
  54,000 DRP
</div>


<div class="inner_data">
  Interest Rate
</div>
<div class="inner_content">
  5%
</div> 

</div>

</body>
</html>

You can always make a few adjustments on this, for instance in IE8 and earlier the spacing between the two elements is less noticable and can be fixed by increasing that margin-right value; you would just need to make sure that when increasing that value you decrease a value elsewhere to avoid it exceeding its parent elements width.

evenstar7139

I have it looking right now. That's great because now I know it's possible.

Now I'm wondering if we could make this adjustable. You see, I want to use these CSS rules anywhere I need a table like this, but the width I need will vary with the situation. I was thinking we could set the width of the wrapper as an inline style in the wrapper DIV, like so: <div class="wrapper" style="width: 450px"> and then adjust the code in the CSS declaration blocks so it can adjust the widths/padding/whatever to the width of the wrapper.

By the way: I had to make some slight modifications to your CSS before I got the look I wanted, so here is the modified code:

.wrapper {
  background: #432b13; 
  text-align: center;
  width: 600px;
  margin: 0px auto;
  padding: 2px;
  border-radius: 6px;
}
.wrapper_title {
  color: #dacea4;
  font-weight: bold;
  font-size: 16px;
  padding: 3px;
}
.inner_data {
  background: #956f4f;
  text-align: right;
  font-weight: bold;
  width: 116px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  margin-right: 0px;
  margin-bottom: 1px;
  padding: 3px 4px;
  border-radius: 6px;
}

.inner_content {
  background: #dacea4;
  text-align: left;
  width: 460px;
  display: inline-block;
  zoom: 1;
  *display: inline;
  margin-top: 2px;
  margin-bottom: 1px;  

  padding: 3px 4px;
  border-radius: 6px	
}

The HTML I used exactly as you pasted it. (Well except for putting my PHP back in...but that shouldn't affect anything )

evenstar7139

Ugh, it won't let me edit my last post >.> This is an addon to that:

Look what happens when I put an input field into an inner_content DIV: http://i22.photobucket.com/albums/b306/evenstar7139/inner_data_class_problem.gif

How can I change the CSS so it's able to make the paddings match up regardless of if inner_content has text or an input field in it?

Thanks in advance.

Sup3rkirby

Unfortunately there isn't necessarily a CSS change that can match paddings across different elements regardless of content. There are attributes like max-height which should prevent an element from exceeding a certain limit, but using something like that here when you are dealing with such a close-knit element and its padding, it would give you an off-center input.

The most logical solution (in my opinion) is to adjust all elements to accomodate this situation. The line-height attribute is an easy fix for this if you don't care to use a fixed height value. It will also make sure to vertically center your text so you don't have to worry about anything being off. 28px seemed to be the minimum line-height value to match the elements up properly.

As for dynamic widths, you could return to percentages, but the tricky part comes from your padding values since they alter the actual rendered width of an element. Something like this works for total widths 500px and greater:

<!DOCTYPE html>
<head>
	<title>Padding/Margin Test</title>
<style type="text/css">
.wrapper {
  background: #432b13; 
  text-align: center;
  width: 600px;
  margin: 0px auto;
  padding: 2px;
  border-radius: 6px;
}
.wrapper_title {
  color: #dacea4;
  font-weight: bold;
  font-size: 16px;
  padding: 3px;
}
.inner_data {
  background: #956f4f;
  text-align: right;
  font-weight: bold;
  line-height: 28px;
  width: 20%;
  display: inline-block;
  zoom: 1;
  *display: inline;
  margin-right: 0px;
  margin-bottom: 1px;
  padding: 3px 4px;
  border-radius: 6px;
}

.inner_content {
  background: #dacea4;
  text-align: left;
  line-height: 28px;
  width: 76%;
  display: inline-block;
  zoom: 1;
  *display: inline;
  margin-top: 2px;
  margin-bottom: 1px;  

  padding: 3px 4px;
  border-radius: 6px	
}
</style>
</head>
<body>

<div class="wrapper">
<div class="wrapper_title">
Bank Account Information
</div>

<div class="inner_data">
  Balance
</div>
<div class="inner_content">
  54,000 DRP
</div>


<div class="inner_data">
  Interest Rate
</div>
<div class="inner_content">
  <input type="text" />
</div> 

</div>

</body>
</html>

Once you sink below 500px then it pretty much dies. Rather than remove all the padding, you could alternatively use a smaller percentage for your .inner_width class, but that's only if you need to bring the main element down below 500px.