Why are these 2 DIVs not lined up even though they have same Padding!

Hey all,

We are having another mystifying result via CSS. We have tried everything and cannot see what is behind this anomaly. To see it please go here:

http://www.notefab.com/index_test.php

You see the item at lower part with the heading “Private & Secure”
Well this is being affected by the same class as the DIV below it, that is class: item_dent
which is to give it a padding-left of 30px. But whereas the lower DIV is correctly indented, the heading of “Private & Secure” is indented with same padding-left and hence they are not left lined up on top of each other as we want to. What is going on? How to fix this mystifying result via CSS?

Thanks,

I’m not sure if I understand your issue entirely, but .item_dent class is used only on one div where header is Private & Secure. If you remove that class then text will be indented properly according to other divs. But if you want the same rules then you have to apply that class to all divs.

1 Like

The heading text (which should be marked up as such), is being affected by the same style because it has the same class attached to it.

<span class="item_dent">Private & Secure</span>

Remove the class if you don’t want the style applied.

As I mentioned elsewhere, your code would benefit from the correct use of semantic tags, and you really shouldn’t be using HTML tables for layout in 2017.

I also suggest you run the page through the Validator, https://validator.w3.org, as you have a lot of obsolete attributes in there.

Edit:
I think I may have misread your question. If you are asking why adding the same class with the same padding to both the bold text and the other text does not move both the same distance from the left-hand border, the answer is that there is a 24px wide image to the left of the bold text. padding-left is applied to the left of the item, not from the left of the containing div.

2 Likes

Hi there WorldNews,

I notice that you are still using that diabolical “top_nav”. :winky:

You probably missed this post in a previous thread of yours…

https://www.sitepoint.com/community/t/why-doesnt-the-whole-div-content-show/273003/9?u=coothead

coothead

4 Likes

1st, HTML tables have a great place in 2017 as they will in 2077, if used at the right place.
As long as they are used within the envelop of CSS. But of course if you have the CSS designer experts in House that want to spend much time to do all in CSS, by all means go for it. SO Tables are good, really best, if you are presenting Tabular data. After all, there is a reason it is called Tabular, and not CSSular. So your repeated note about Tables is noted. Please leave that out from your further comments. Now about your answer to the actual part of this question, how would you fix this? Via placing the image there via position: absolute? Or what?
Thanks,

Sorry, but what I unzip this all I get is a HTML1 looking Text upon Text?
Have you a screen shot or a URL to your idea?

Thanks

Yes, for displaying tabular data, NOT for layout.

2 Likes

By “fix” you mean line up the bold text with the text beneath?

You have 30px padding on the lower text. You have an image 24px wide before the bold text, so you would only require another 6px padding to line it up. (I haven’t checked whether there is padding on the image, but I’m sure you can get the sums to add up.)

Agreed, but this is not tabular data. Tabular data is where you have a relationship between the data in rows and columns, such as sports results, weather forecast, etc. This is just information arranged in a grid.

4 Likes

Yes, I did this.
That is created a new Class with padding-left: 6px;
to count for the image having width of 24px.
Bu the bold text on top line still not lining up exact with the text beneath it!
Darn CSS can be so frustrating time wasting :frowning:

Thanks,

Techno, FYI: I finally got them lining up just right, with the use of Position relative & absolute, by moving the image out of the normal flow using absolute on it. You can see it here:

http://www.notefab.com/index_test_2.php

Boy I tell you, I really hate how mystifying this CSS is :slight_smile:
I cannot wait until we raise $10-Mill so I can hire a team of crack pot CSS gurus so I never have to touch CSS again myself, since my expertise is in LAMP and real coding.

indeed.

5 Likes

I’m glad you’ve found a solution you’re happy with. There is generally more than one way to achieve a given result in CSS; which is most appropriate usually depends on context and to some extent, personal choice. I will note, however, that as others have advised, using position:absolute can have unexpected consequences if you are not very familiar with CSS, and is best avoided in most circumstances.

I’m not sure where you get your idea about CSS being difficult. Yes, there are certainly now some complex methods and effects available for those who wish to use them, but a simple layout such as yours can be achieved with quite basic CSS, which you could learn in a weekend. When you have a better understanding of how it works, you’ll find it much quicker and easier to use.

6 Likes

I am not sure what that means. :wonky:

Have you actually tried clicking the “index.html” file. ? :rolleyes:

Here is the screenshot that you requested…

coothead

1 Like

I suspect they neglected to also unzip the folder containing the css and saw only bare html.

I suspect they neglected to also unzip the folder containing the css and saw only bare html.

That’s why we should use gist, jsfiddle, jsbin, codepen, or another similar service instead of sending zip files.

1 Like

@coothead’s CSS file was not zipped separately. Unpacking the “package”, unpacked both files.

<off topic>

Personally, I prefer to work on “working files” that show the competence with which the user writes the header. I also find it difficult to analyze how some code works when CDNs are involved and such. I generally request “working files” from posters for those reasons.

2 Likes

The folder containing the CSS file was not zipped. :unhappy:

All the O.P. needed to do was to simply unzip the
attachment then click or double click the “index.html” file. :winky:

coothead

2 Likes

That is definitely not the way that I wish to work. :rolleyes:

Personally, I prefer to provide the actual files that
are required for the construction of the web page. :winky:

coothead

It is possible to extract individual files/folders from a zip, if you open the zip, then drag and drop any piece of content to some place. Any bits you don’t drag and drop don’t get extracted.
It certainly seems like the OP was not seeing the whole picture. A shame, as it is a good example of how a simple layout like this can be kept fluid quite easily, plus it used more semantic html mark up.

:smile-sp: Granted. I do that occasionally with some personal zip archives, in fact.

By whose yardstick? :tongue: