My HTML page is divided into two sections:
LEFT : there is a table
RIGHT: there is a div including its text
I want that the table would be high like the div, and it should adjust automatically when the div's height changes.
(I tried it in CSS: body, html, table {height:100%}, but this is not what I want).
PS:
The div arrives at the bottom of the page, so I can adapt the table at the height of the page.
Can someone please help me to do this?
i think that, you can try use variable in css, and then substitute it for table height and div. I don't know exactly what, you mean.
PS. maybe you should use this selector: table, div { min-height: ... ;}
If you're talking about having equal heights on both columns, this can easily be achieved with Flexbox.
Check this page out
https://davidwalsh.name/flexbox-column
Related
Take this table for example: http://codepen.io/anon/pen/MwRbRy
I want to style my table so that it scrolls the thead stays at the top of the page, but it needs to keep aligned with the columns of the table, which the above doesn't.
How would I achieve this? I tried position: fixed but it doesn't keep it aligned. I also don't want to have to manually set widths on everything, as the content is dynamic.
Add to JS $('table').floatThead(); This is jQuery Library and it does the work for you
Included script :
https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.2.13/jquery.floatThead.min.js
Example in CodePen
PS: I removed position:fixed.
My problem is hard to explain (especially when knowledge of English is at the primary level)
My test site: ----
On page is over than html code, you can see scroll to right. (On small resolution)
Picture of this: http://i.imgur.com/arCoPt7.png
How to fix that problem ?
If, something is not clear, and somebody don't understand my problem please ask.
(I am not giving CSS becouse is too much of code, so everything is in source code of website)
Sorry for my bad English...
your problem is the class statystyki inside the class menu.
in your p element you have width:100% and float left and the other elements right.
So you exceed the total width of 100%.
Try to make a width that dont exceed the 100% and also is best if you clear the floats.
Remove the extra margins and check all the divs width.
or simply add
this style to your body.
body {
width: 100%;
overflow: hidden;
}
http://haleem.itspiders.net/
There is no height specified for body tag but why is it taking some amount of height when I see in inspect element?
here is the code
http://jsfiddle.net/9TzEC/3/
And here is the example screen
Look to the left of the jsFiddle screen, uncheck "Normalized CSS"
http://jsfiddle.net/Kyle_Sevenoaks/LwBLH/1/
#Sowmya every block tag/element having auto height, If content will increase apparently element height will increase , less content=less height, large content= long height !!
I got the solution. That was happening because of the table added inside the "content_wrap" div. this is was not considering the table inside it so I added a blank div around the table then it is working as child of the div "content_wrap".
Updated fiddle http://jsfiddle.net/9TzEC/7/
add this css to the end of css file
.content_wrap {overflow:auto;}
this is because of the floating table in this div. if you need I will explain it in detail just ask ;)
I have this and it got an HTML img#logo-image, on some occasions it will not be displayed, display:none.
The problem is that the entire div#menu-title should fit the width of the page.
I tried putting width:100%, but when the img#logo-imag" is displayed it breaks the line being below the img#logo-image.
The width:100% does not work with elements float:left
Just unfloat the menu-title div and remove the width.. it will automatically be 100% of the header then.. and if the image is present it will adjust the ul#menu list to make room for it, which is a natural behaviour
if you want the menu-list to really only take the available width (say for a background color or something then you can add overflow: hidden; to ul#menu - though I don't see a need for that in your example code
here's a simplified version of your Fiddle - hover on the header to make the image disappear and see the ul#menu adjust to suit
Example Fiddle
You have both logo-image and menu-title floating left. Since they arent really in separate divs, they are all part of the same div, they appear next to each other. On top of that, you set the menu-title to be 760, which isn't the width of the page. At least that what it looks like you did. Do not use width 100% because resizing the page will shrink that menu title.
You really just have to play around with the divs, but i would say that separating those two divs would make you be able to stack them on top or below each other.
And in using Chrome's inspect element feature, I don't see a display:none for the image's css. I don't know why that would do that.
I'm really not sure of what you are trying to accomplish since making the div#menu-title width: 100% doesn't leave any room for anything else on the same row.
Why not let them both be inline and let the widths be whatever they need to be?
Anyway, I have a guess at what you want. You want those two elements to behave as being in a table, inside a table row, and each in a table-cell so that the image takes a maximum width, and the div#menu-title taking all of the rest of the place. In that case put them in a table, or use display: table-cell for the image and the div and fiddle around with that.
i made myself a Speed Dial-like homepage with links I visit the most.
Now, i made it elastic, so when browser window is narrowed horizontally, the boxes getting narrower too.
What I want is that when browser window is narrowed vertically, that boxes get narrower again.
I tried with several percentage height rules but it didn't work, need help.
Here is the page I'm working on its one-file page so CSS is not separated.
http://www.purplerspace.com/dl/
You have to add the height percentages to almost all the divs if you want it to work. Add height: 100% to html, body then the wrappers and also the lis and yeah, the a style too.
Don't know if it's optimal but tables for this should work. Set the table height and width to 100%. And don't forget to set your html and wrapper tag to 100% in height.