If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Trouble with margins and padding in div next to floated div

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

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:

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.

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

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/b3...ss_example.gif

The better I get at programming, the more I appreciate arrays.Handy dandy things they are.

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:

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.

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

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:

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:

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.

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"