I am trying to create a result form from mysql and I am having problems formatting my html data tables. The result should be show a picture ( link in mysql ), then next to it a table that will probably contain 4 fields that I have as table0. I want this to be 100%, but when I make it 100%, it automatically drops below the picture. The same goes for the 2 tables, table1 and table2 ( all these names are temp only so that I can see the placement ). I can not get them to be 50% each. I want to add another row of tables that will be hidden in all views accept with a media query of 240. This would then show a little more information for mobile users. I am not worried just yet about the media query. Can anyone help me please. I have added the code here along with a link. I am not using external css until it works.
Your description is somewhat hard to follow, but I will make an attempt: Your first problem saying 100% puts the table below the image makes complete sense. If something is width 100% that means it will take up 100% of the width of its parent which in this case will be "example B" div. You haven't even styled that to have a width so it will inherit from its parent which in turn is page01 (none specified) then finally #pager has a width of 75%.
So the problem is you want the table to take up 100% of that 75% but still be next to the image? This isn't possible you will need the width to equal 100% minus image width. You could change how that is handled by having the image in one div that floats left and the table in another that floats right. The issue you would have to dynamicly figure out what % the image width is based off the screen width. (or you could go with a preset width that makes sense say around 960px and then you can manually calculate everything else based off that size)
It seems your second problem is the same as the first as 50%+50% = 100% and fills the whole screen again.
I know you mentioned that the names would change because you knew someone would complain about how broad they are, but honestly naming things appropriately even in the beginning stages are going to help to you visualize what purpose each div serves and it will help us who attempt to assist you in these troubles visualize what is needed.
Last tip i would leave you with is installing firebug it will allow you to click on each element you are trying to style and style it in the browser image until you get your desired result then you can go back to the code and change your stylesheet. This helps in situations where you are having a hard time visualizing the end result of your code.
08-21-2013, 10:47 PM
You did not provide 1 line of code, but the lesson learned was worth more than the actual solution. Thank you so much. You explained it to the point of understanding and something to carry with me. Understanding is always worth more than the solution because the problems are minimal when you have the foundation.
Changing the names is something I will work on. Never heard of firebug, but I will definitely look into it.