On my web page I have a banner div whose width is 90 percent of the page. Below the banner div is another with and it’s also 90% of the page.
Inside this div are two tables and each table contains three cells. The width of the cells from both tables should add up to 100% of the div that holds them but for what ever reason, the banner div is wider than this. Please see my markup in the following link (https://jsfiddle.net/jQing/gvuyc0p3/10/)
oangodd,
I don’t see a difference in the width of the banner and the table container. Perhaps you forgot to include the width of #page. Nevertheless, I will toss in a couple of suggestions to test.
(1) Post a screen shot that shows the problem as you see it.
(2) Give the page a doctype. <!doctype html> is recommended.
(3) Unless you have a valid reason for the following string in your html tag, delete it.
xmlns="http://www.w3.org/1999/xhtml"
(4) Delete the following universal assignment of margin:0 and padding:0. Using the universal selector for this is not wise.
* {
margin: 0;
padding: 0;
}
(5) You are centering the banner at wide widths with {margin: 0 auto;}
(6) Instead of using {margin-left:5%}, why not use {margin: 0 auto;} for the dataTable, too?
I will recommend that you replace IDs with classes unless they are needed by JavaScript, as fragment identifiers, or a plugin. Styles assigned to IDs are not easily overridden. That’s a personal recommendation, though; not a deal breaker.
Give these a try and post back
Neither do I?
Hi, here is the image that shows the banner div is wider than the div below it. It only gets worse as the screen resolution increases.
Thank you. I see that now.
Please update your fiddle with the suggestions from my last post and include the URL to the fiddle and another screen shot of the updated fiddle.
All I can see is a 1px jog at uneven screen sizes (unless I;m missing the obvious) due to the fact that you are expecting 2 tables of 50% width to equal 100% of the parent div. If the parent is 90% it will be rounded once but each table of 50% will need to be rounded twice so you get a 1px jog at odd screen sizes. Some browsers will be better than others.
It looks to me as that whole concept of multiple tables is wrong anyway and you should be using one table with a table header or summary for the red banner at the top and thus all will be contained neatly in one table.
You should avoid trying to match multiple separate elements where you want a background to be continuous and instead contain them in one parent.
Also I note you are using data1 and data2 in your cells as well as on the table so you have effectively floated the last cell in each table which will break the table in some browsers.
Here are the link to the modified code and a screenshot of page after modifications.
https://jsfiddle.net/jQing/gvuyc0p3/29/
I think I will try Paul’s suggestion and see how that goes. Thank you all for your help.
Same with me. This threw me off
But testing locally what I see is alternating lined-up, jog, lined-up, jog … i.e. uneven widths.
Where are you at now? Have you tried @PaulOB’s suggestions and if so, how did they work for you? If you still need help, please leave a note and I’ll pick this up again.
Unfortunately, although I did not get the gap when applying Paul’s suggestions my page was not responsive. I needed the table to shrink or break and go on the next line when the page width is decreased but putting everything in a single table will make a page layout rigid. I decided to use divs instead of tables and I was able to achieve my goals.
No that’s not correct and you could simply turn the cells into display block using media queries and stack them vertically in one line.
Remember you should not abuse the html for design considerations. If the data is tabular then a table must be used for best accessibility.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
