I am displaying images in HTML control horizontally. The images TABLE is inside main DIV. CSS for DIV is as follows:
#main
{
width: auto;
height: auto;
margin: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
The problem is that main DIV border is not extending and images are dropping out of it as shown in following screenshot:
Here is the HTML scippet:
<body>
<div id="main">
...
<table>
<tr id="image-list">
</tr>
</table>
...
</body>
Please suggest how to alter code so that DIV border automically increase its width as per images in it?
The issue which you are encountering - Demo
And this is what will fix the issue, am doing nothing fancy, I assigned width: 100%; to the table element, and than am using table-layout: fixed; which is important here, and than just use max-width: 100%; for your img tag... Also make sure you use width for your td elements as well...
Demo (Fixed issue)
#main {
width: auto;
height: auto;
margin: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
img {
outline: 1px solid #eee;
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
table tr td {
width: 33%;
}
table tr td img {
max-width: 100%;
}
give :
table{width:100%;}
as well as
#main
{
width: 100%; /*not auto*/
/*remaining css */
}
that would solve your problem
so, final css :
html, body {
width:100%; /* important */
height:100%; /* important */
margin:0;
padding:0;
}
#main {
width: 100%; /* changed*/
height: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
table{
width:100%; /* changed*/
height:auto;
border-collapse: collapse; /* added and very important*/
table-layout: fixed;/* added and very important*/
}
img{
width:auto; /* change as per your need */
max-width: 100%;
height:auto; /* important to maintain aspect ratio of images */
}
your problem
solution demo
Put this CSS in your stylesheet to fix it:
#main
{
width: 400px /*you can give fixed value or auto value*/;
height: auto;
margin: auto;
padding: 2px 0px 0px 0px;
border: 3px solid #ccc;
}
#main table
{
width:100%;
}
Related
In this example, which I'm trying to understand, definitely overflow happens, but it doesn't work. why?
body, html, p {
margin: 0;
padding: 0;
}
html{
background-color: #666;
}
body{
margin: 0 auto;
width: 780px;
background-color: #99ccff;
padding: 10px;
overflow: hidden;
}
div{
background-color: #b57c12;
padding: 10px;
border: 1px solid black;
width: 820px;
}
p{
background-color: #f7f0b7;
border: 1px solid whitesmoke;
}
HTML: Inside Body Tag
Emmet: div>p>lorem10
Body should always cover 100% of the width. I would suggest you set a inner wrapper instead that you use overflow hidden on.
https://jsfiddle.net/jjxurtpk/
html
<div class="wrapper">
<div>
test
</div>
</div>
css
.wrapper{
width:400px;
overflow:hidden;
background:#eee;
padding:20px;
}
.wrapper div{
width:500px;
background:#ddd;
padding:10px;
}
update: https://jsfiddle.net/jjxurtpk/1/
I believe the overflow hidden does not fully apply unless the background (html) does not have overflow hidden. I'm not sure why. It could just be thats how browsers simply render the body tag.
See this fiddle
You will have to add overflow:hidden to html too ..
See the below CSS
body,
html,
p {
margin: 0;
padding: 0;
}
html {
background-color: #666;
overflow:hidden; /* <---------------add this----------*/
}
body {
margin: 0 auto;
width: 780px;
background-color: #99ccff;
padding: 10px;
overflow: hidden;
}
div {
background-color: #b57c12;
padding: 10px;
border: 1px solid black;
width: 820px;
}
p {
background-color: #f7f0b7;
border: 1px solid whitesmoke;
}
You need to set a height on the body, and apply overflow: hidden to the html.
See demo here
html{
overflow: hidden;
}
body{
height: auto;
}
my problem is that I am trying to center a div inside my full-width header like this:
</body>
<!-- the CSS -->
#header {
margin-top: -1em;
margin-left: -1em;
height: 2.95em;
padding:15px 0;
min-width:150%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
#insideHeader {
border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}
The result of this code is in the here.
Thanks in advance.
min-width:100%; seem to centre your div...
body {
background-color: red;
margin: 0;
}
#header {
margin: 0;
height: 2.95em;
padding:15px 0;
min-width:100%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
#insideHeader {
border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}
<body>
<div id="header">
<div id="insideHeader"></div>
</div>
</body>
or
http://jsfiddle.net/x1b7zpy4/1/
As my understanding you are trying to fit the outer box in the window and center align the inner box.
Add/Update following styles
html, body {
margin: 0;
padding: 0;
}
#header {
margin-top: -1em;
height: 2.95em;
padding:15px 0;
width:100%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;
}
There are default padding/margin of browser. You need to override those in order to fit your outer box.
Once you do that, you need to remove your negative left margins which were put in order to make box stick to the boundary of window.
Then set the width to 100%.
For reference - http://jsbin.com/lomeganori/1/edit?html,css,output
give
#header
{
box-sizing: border-box;
//and remove height:2.5rem;
}
box-sizing:borderbox will removes all your troubles, and dont give height to parent
that will automatically take the height of the inner div
I have a table with px widths. The only thing I am changing are those px to %. When table receives new values, table's header and footer accept them correctly and take the correct position. But table's body reacts taking its total width as the width of only the first column. This means the 4 columns collapse into the first one, and leving the next 3 columns blank.
Here I explain with images.
Before: width on px. Each column on the body matches with each column on head:
Code involved:
table {
width: 100%;
border-spacing: 0;
color:#666;
font-size:12px;
background:#eaebec;
margin:10px;
border:#ccc 1px solid;
border-radius:3px;
box-shadow: 0 1px 2px #d1d1d1;
table-layout: fixed;}
.discontinueColumn{
font-size: 10px;
width: 90px;}
.editColumn{
font-size: 10px;
width: 90px;}
.headerScroll{
width: 16px;}
tbody{
display: block;
height: 360px;
width: 900px;
overflow-y: auto; }
.contentColumn_turn_conf1{
width:549px;}
.contentColumn_turn_conf2{
width:149px;}
After: width on %. All body's columns reduce it's total space to head's first column width:
Code involved:
table {
width: 100%;
border-spacing: 0;
color:#666;
font-size:12px;
background:#eaebec;
margin:10px;
border:#ccc 1px solid;
border-radius:3px;
box-shadow: 0 1px 2px #d1d1d1;
table-layout: fixed;}
.discontinueColumn{
font-size: 10px;
width: 10%;}
.editColumn{
font-size: 10px;
width: 10%;}
.headerScroll{
width: 4%; }
tbody{
display: block;
height: 360px;
width: 100%;
overflow-y: auto; }
.contentColumn_turn_conf1{
width:60%;}
.contentColumn_turn_conf2{
width:20%;}
As you can see, on the last one body's 100% width is reduced to head's first column width. On code you can appreciate only width values have changed. Why is this happening? Any additional code please let me know.
This is what it runs when pasting code: jsfiddle.net/6XWRK
you gave display: block; to a <tbody> which is not good since it is display: table-row-group by default.
This could be what you want: http://jsfiddle.net/4Eak6/
Let the table header define the column width.
table {
width: calc(100% - 20px);
border-spacing: 0;
color:#666;
font-size:12px;
background:#eaebec;
margin:10px;
border:#ccc 1px solid;
border-radius:3px;
box-shadow: 0 1px 2px #d1d1d1;
table-layout: auto;
}
.discontinueColumn {
font-size: 10px;
width: 10%;
}
.editColumn {
font-size: 10px;
width: 10%;
}
.headerScroll {
width: 4%;
}
tbody {
height: 360px;
overflow: auto;
}
.contentColumn_turn_conf1 {
width:60%;
}
.contentColumn_turn_conf2 {
width:20%;
}
Edit:
From the source I guess you want floating table headers. So here is demo for that: http://jsfiddle.net/4Eak6/1/ using the jQuery Framework and floatThead Plugin. Maybe it's a help for you.
I am having some trouble with my sticky footer. First of all, my content does not reach the entire bottom of the screen (even underneath the footer .. check on larger monitor). Also, when the window is smaller than the content, the header moves and does not expand 100% in width when you move the horizontal scrollbar. What am i doing wrong?
Here is my testing site: My Site
If you use firebug or Google Chrome's built in Inspect Element, you can see where all the elements are.
Here is some of the css:
.content
{
width: 1100px;
margin: 0 auto;
border-left:1px solid #000;
border-right: 1px solid #000;
background:#222;
min-height: 100%;
height: 100%;
padding-bottom:50px; /* Padding for footer (width) */
}
.contentInner
{
padding:0px 10px 0px 10px;
min-height: 100%;
height: 100%;
}
.footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #000; /* So you can see it */
}
Here is what it looks like when the content is bigger than the window:
I would also like the Content to extent all the way down the page with the content!
Edit / add your css like this to get rid of smaller screen issues..
.mainContainer {
min-width: 1100px;
}
To get that content background to continue all way down, i suggest using centered background image in .mainContainer and remove content background OR just set .content min-height to some large value like 900px OR use javascript to set content height if smaller than screen height.
if you put your .mainContainer to the width of your .content, it will work.
.mainContainer {
width: 1100px;
}
Is it what you want ?
Replace your CSS to this one.
.content
{
width: 100%;
margin: 0 auto;
border-left:1px solid #000;
border-right: 1px solid #000;
background:#222;
min-height: auto;
height: auto;
padding-bottom:50px;
position:absolute;
}
.contentInner
{
padding:0px 10px 0px 10px;
min-height: auto;
height: auto;
}
.footer
{
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background: #000;
}
I want to divide page into two "div"s. Left(25%) and right(75%). And i wanted a border between the two, to separate them. But unless I enter text/image into the "div"s they don't expand.
<div>
<div class="left">
<img src="granted_300_50.png" id="logo">
</div>
</div>
And the css is:
div.left{
background-image: url("flower_ornament2_watermark.png") ;
background-repeat: no-repeat;
background-color:white;
border-top: 0px;
border-right: 2px solid #c3c3c3;
border-left: 0px;
border-bottom: 0px;
white-space: nowrap;
height: 100%;
width: 350px;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
Help?
Digvijay
Setting height in percentage on inline elements works only if the container has a specific height set too, up to the body and html.
This CSS should work:
html,body { height:100% ;}
div#container { height:100%; }
div.left { height:100%; }
Another common workaround is the so called "faux column" method:
http://www.alistapart.com/articles/fauxcolumns/
http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/
You can also use display:table; for the container and display:table-cell; for the floated divs. But it's not supported by IE7.
div#container { display:table; }
div.left { display:table-cell; }
Take a look at this:
CSS
.left{
width:25%;
height:100px;
border-right:1px solid #ccc;
}
.right{
width:75%;
height:100px;
border-left:1px solid #ccc;
}
HTML
<div class="left"></div>
<div class="right"></div>
Unless you also set a height on the body and html nodes, they will collapse. You can fix this by setting them to 100% height:
Demo: http://jsfiddle.net/SO_AMK/Nhajy/
CSS:
html, body, div { height: 100%; }
div.left {
background-image: url("flower_ornament2_watermark.png");
background-repeat: no-repeat;
background-color: white;
border-top: 0px;
border-right: 2px solid #c3c3c3;
border-left: 0px;
border-bottom: 0px;
white-space: nowrap;
height: 100%;
width: 350px;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
The other solution is to set a min-height:
Demo: http://jsfiddle.net/SO_AMK/MSLdT/
CSS:
div.left {
background-repeat: no-repeat;
background-color: white;
border-top: 0px;
border-right: 2px solid #c3c3c3;
border-left: 0px;
border-bottom: 0px;
white-space: nowrap;
min-height: 100px;
height: 100%;
width: 350px;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
you can use something like:
/css code/
height:calc(100%-2px);
border:1px solid black;