I'm try put a table in fieldset, where table has a width 2200px fixed, and table parent (a div) has css property overflow-x: auto; width: 100%
Structure like this:
fieldset:
div:
table:
But scroll of div is not showing, how to can I fix this problem?
jsBin: http://jsbin.com/sazogamiha/edit?html,css,output
You can use width: 100vw; instead of width: 100%;.
Jsbin
#pai {
width: 100vw;
overflow-x: auto;
float: left;
white-space: nowrap;
}
Or you have to give min-width: 0; to fieldset. fieldset has min-width: -webkit-min-content; by default so you override that.
fieldset {
width: 100%;
min-width: 0;
}
Jsbin
Is it possible that you're using the comma (",") instead of the semicolon (";") to separate css properties?
About widths.
Some tags do not work well for your issue, and one of those is fieldset
Try this
<div class="wrapper">
<div class="container">
<fieldset>
<table>
<tr>
<td>...</td>
</tr>
</table>
</fieldset>
</div>
</div>
And this CSS
div.wrapper {
width: 100%;
}
div.container {
overflow-x: auto;
width: 90%;
}
table {
width: 2000px;
}
table td {
border: 1px solid black;
}
Related
I want to restrict the stretching of a textarea to 100% of the parent fieldset.
According to this question it works, when the parent is a div:
How can I prevent the textarea from stretching beyond his parent DIV element? (google-chrome issue only)
Now with fieldsets this doesn't seem to work: http://jsfiddle.net/b4oLy135/7/
HTML
<fieldset id="container">
<textarea></textarea>
</fieldset>
CSS
textarea {
max-width: 50%;
}
#container {
max-width: 80%;
border: 1px solid red;
}
What am I missing here?
You can do the following.
#container {
position: relative;
max-width: 80%;
overflow: none;
border: 1px solid red;
height: 100px;
margin: 0;
padding: 5px;
}
textarea {
position: absolute;
display: block;
width: 40%;
max-width: calc(100% - 15px);
height: 40%;
max-height: calc(100% - 15px);
}
<fieldset id="container">
<textarea></textarea>
</fieldset>
This way the textarea can only be resized to the width & height of its parent fieldset.
If you have more then one <input> in your fieldset, absolute positioning does not work.
My solution was to just use a wrapper over every <textarea> field, so I could use the solution I referred to in t the question.
Important: Does not work when using % on the parent. There is a bug when using % and stretching over 200% of the parent.
Here is my current fiddle:
https://jsfiddle.net/d23hgb8w/3/
HTML
<fieldset>
<div class="textarea__wrapper">
<textarea></textarea>
</div>
<input>
</fieldset>
CSS
.textarea__wrapper {
border: 1px solid red;
width: 500px;
}
textarea {
max-width: 100%;
}
How do I align a javascript countdown box to the center of the page? The url is where the js is located is http://www.freelanceseohelp.com/offer/mobile/index.html
I tried aligning the following but I'm having problems:
.flip-clock-wrapper {
I tried adding the above to
<div class="clock"></div>
Any help fixing this will be appreciated. Thanks.
I'm pretty late to the party here but the following works for me at the time of writing (Version: 0.7.4 Beta). The idea is to wrap it in a container and override some of it's CSS.
HTML
<div class="container">
<div class="flip-clock"></div>
<!-- Flip clock is attached the this element, not .container -->
</div>
CSS
.container {
text-align: center;
}
.flip-clock {
display: inline-block;
width: auto;
}
By default .flip-clock has width: 100% and display: block. By setting width: auto and display: inline-block the item no longer spans the width of it's parent and is able to be centered by adding text-align: center to it's container.
.flip-clock-wrapper {
/* text-align: center; */
/* position: relative; */
/* width: 100%; */
margin: 0 auto;
max-width: 460px;
margin-top: 2em;
}
Remove the Commented CSS in the above CSS Class and add the rest 3 lines in your CSS class to get your Page like Below
through testing, i determined the width of the widget is 460px when considering margin. here is the css to make it happen.
.flip-clock-wrapper{
max-width: 460px;
margin: 3em auto 2em;
}
I also added top margin of 3em and bottom margin of 2em to align it correctly. that page has a ton of problems with the CSS.
Add new div element with specify display: inline-block; to archive this.
<div class="clock flip-clock-wrapper">
<div class="middle"> // Add div element (opening)
....
....
....
</div> // Add div element (closing)
</div>
CSS
.middle{
display:inline-block;
*display:inline;/* IE*/
*zoom:1;/* IE*/
}
Screenshot
Another way:
.flip-clock-wrapper {
display: table; //added
}
.flip-clock-divider {
float: left; // remove
}
.flip-clock-wrapper ul {
float: left; // remove
display: inline-block; // added
}
Add this is your css-
.flip-clock-wrapper{
width:460px;
margin:1em auto;
}
I hope I'll helps you.
Just decrease the width of your clock wrapper & set margin value.
.flip-clock-wrapper{
width: 480px;
margin: 30px auto;
}
Try like this
.flip-clock-wrapper{
max-width:480px;
margin:3em auto;
}
Using the .js file from a CDN I did not wanted to edit it.
I applied those lines to my website main CSS:
.flip-clock-wrapper {
width: inherit !important;
}
.flip-clock {
display: inline-block;
width: auto;
}
<table align="center">
<tr>
<td></td>
<td>
<div class="clock" style="margin:Inherited;"></div>
<div class="message"></div>
<script type="text/javascript">
code!!!
</script>
</td>
<td></td>
</tr>
</table>
Make the .flip-clock-wrapper contain width:auto and display:inline-block. That is:
.flip-clock-wrapper {
text-align: center !important;
position: relative;
width: auto;
margin: 1em;
display: inline-block;
}
I would like to achieve a 3 rows layout that behaves like this:
Content is displayed in the middle row. With no content, it just has the fixed height header on top of the screen and the fixed hight footer at the bottom. The middle row is empty and fills up the remaining height of the window.
With increasing content, the middle row gets larger. When it reaches the max size, the total layout size increases, so that the user now has to scroll to see the lower content and the footer.
I kind of managed to do that with tables:
http://jsfiddle.net/v73c4L7n/8/ (lot of content)
http://jsfiddle.net/v73c4L7n/9/ (little content)
HTML
<table class="main">
<tr><td>HEADER</td></tr>
<tr class="middle">
<td>
<div class="area">
<p>Content</p>
<p>Content</p>
</div>
</td>
</tr>
<tr><td>FOOTER</td></tr>
</table>
CSS
body, html {
height: 100%;
padding:0;
margin:0;
}
.area {
position: relative;
width: 300px;
background-color: green;
margin: 0px auto;
min-height: 100%;
height: 100%;
}
.main {
height: 100%;
width: 100%;
}
.main tr:first-child, .main tr:last-child {
height: 50px;
}
The problem is, that it doesn't seem to work in IE9 or IE10. I think, the problem is the height:100% of .area inside a table cell, that has no explicit height.
So I wondered if there is a better approach to this kind of layout.
have you given a try to set .middle height to 100% too ?
this way, the .middle <tr> will take as much place wich remains, others <tr> will expand according to their content.
http://jsfiddle.net/v73c4L7n/10/ (works in latest browsers .
updated CSS:
body, html {
height: 100%;
padding:0;
margin:0;
}
.area {
width: 300px;
background-color: green;
margin: 0px auto;
min-height: 100%;
height: 100%;
padding:1px
}
.main {
table-layout: fixed;
border-collapse: collapse;
background-color: red;
height: 100%;
width: 100%;
}
.main .middle > td {
background-color: yellow;
width: 100%;
}
.main tr:first-child, .main tr:last-child {
height: 50px;
}
.main tr:first-child > td {
width: 100%;
background-color: rgba(0,0,255,0.5);
}
.main tr:last-child > td {
width: 100%;
background-color: rgba(0,0,255,0.5);
}
.middle {
height:100%;
}
It worlks too with display:table and regular tag elements such as header, main and footer. http://jsfiddle.net/v73c4L7n/13/
Display:flex; makes things even easier : http://jsfiddle.net/v73c4L7n/14/
display:table is understood since IE8, flex since IE10 :(
Use divs not tables if you can. I would use the calc(expression) to get 100% height minus the sum of the footer and header. Look here in the fiddle. If you delete some of the paragraphs in the content div you will see it moves the footer to the bottom of the page even if theres no content.
JSFiddle
HTML
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="content">
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
<p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
</div>
<div id="footer">
FOOTER
</div>
CSS
html, body {
background-color:yellow;
height:100%;
}
* {
margin:0;
padding:0;
}
#wrapper {
height:100%;
margin: 0 auto;
}
#header{
height: 50px;
width: 100%;
background-color:purple;
}
#content {
background-color:green;
min-height: -moz-calc(100% - 100px); /* Firefox */
min-height: -webkit-calc(100% - 100px); /* Chrome, Safari */
min-height: calc(100% - 100px); /* IE9+ and future browsers */
width:300px;
margin:0 auto;
}
#footer {
height: 50px;
width:100%;
background-color:purple;
}
I'm currently stuck with this problem. I'm resizing a picture via CSS in a box with its height forced.
.img_contener {
width: 100%;
height: 400px;
}
There is the CSS for the image resizing :
img {
max-width: 100%;
max-height : auto;
height: auto;
width: auto;
box-sizing: border-box;
}
Now I want to center the resultant picture, which, depending on its height, doesn't fit to the containing box, and which is staying by default on the left.
Both the margin:auto and the text-align:center don't work.
I didn't try out jquery solutions so far... I would rather like a CSS-based solution. My alternative is to force-resize the picture using php.
Try this:
.img_contener {
//your css ...
overflow:hidden;
}
img {
//your css ...
display : block;
margin : 0 auto;
}
If you want to keep your image to be centered in main DIV you need to use a additional tag to img
Something like this
<div id="container">
<p><img src="http://userserve-ak.last.fm/serve/252/15767501.jpg" class="inner"/></p>
</div>
And Your CSS
#container {
height: 100px;
width: 200px;
border: 1px solid black;
overflow: hidden;
}
.inner {
height: 120px;
width: auto;
}
p {
text-align: center;
}
Working Fiddle : http://jsfiddle.net/TXvuQ/1/
Margin:auto will only work if you also apply display:block to the image.
This is completely doable in CSS. Please see my example below, you should also add overflow: hidden to your container object.
HTML
<div id="container">
<img src="http://userserve-ak.last.fm/serve/252/15767501.jpg" class="inner"/>
</div>
CSS
#container {
height: 100px;
width: 100px;
border: 1px solid black;
overflow: hidden;
}
.inner {
height: 100px;
width: auto;
}
Working Fiddle - http://jsfiddle.net/TXvuQ/
I am breaking my head over this seemingly easy problem, perhaps someone could help. I would like an arbitrary amount of inputs, with labels, stacked horizontally on one line like in the image.
There are a number of ways to go about this. Personally, I like using tables for this type of data (but if it's not tabular data it is recommended to use other means like DIVs). I'll try to show a quick example of a table:
Table:
<table width="100%" cellpadding="0" callspacing="0" border="0">
<tr>
<td width="200">LABEL 1</td><td> </td> <!-- this is the padding table cell -->
<td width="200">LABEL 2</td><td> </td>
<td width="200">LABEL 3</td><td> </td>
</tr>
</table>
Example Table JSFiddle
Using Div's are slightly more involved, as they are inline by default; you would get your labels on different lines. You can look into CSS attributes like "display: table-cell" to achieve the same results as the above, otherwise you can look into absolute and relative positioning using CSS.
<div width="100%">
<div style="position:absolute; top:0px; width: 33%;">LABEL 1</div>
<div style="position: absolute; top:0px; left: 33%; width: 33%;">LABEL 2</div>
<div style="position: absolute; top:0px; left: 66%; width: 34%;">LABEL 3</div>
</div>
However, there are still some problems with this as it's assuming your layout is 100% the width of the page/browser viewing area.
Generally, when you want something to "take up the remaining space" (like your input box) you have 3 options:
Flexbox, which would be ideal, but not widely supported yet.
Tables, like explained in Kevin Reids answer
Establish separate Block Formatting Contexts, example below
HTML
<div class="container">
<div class="field">
<label for="in1">Label</label>
<div><input type="text" id="in1"></div>
</div>
<div class="field">
<label for="in2">Label</label>
<div><input type="text" id="in2"></div>
</div>
<div class="field">
<label for="in3">Label</label>
<div><input type="text" id="in3"></div>
</div>
</div>
CSS
.container {
padding: 20px;
background: #999;
overflow: hidden; /* for float containment */
}
.field {
padding: 4px;
background: #fff;
border: 2px solid #999;
float: left;
width: 33%;
-webkit-box-sizing: border-box; /* 33% effective width */
-moz-box-sizing: border-box;
box-sizing: border-box;
}
label {
float: left;
width: 100px; /* fixed width of label */
}
.field div {
overflow: hidden; /* create a new Block Formatting Context */
}
/* inputs fill the new BFC */
input {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
There is only 1 added layout element, which would be the div that wraps the input. This is because input doesn't want to behave like a block element, even if you tell him to do so.
fiddle: http://jsfiddle.net/RqzJC/
EDIT: updated to address fixed width labels. (arbitrarily set to 100px)
http://jsfiddle.net/SebastianPataneMasuelli/XHrSr/
HTML:
<div>
<div>
<div class="label">LABEL</div>
<div>filler</div>
</div>
<div>
<div class="label">LABEL</div>
<div>filler</div>
</div>
<div>
<div class="label">LABEL</div>
<div>filler</div>
</div>
</div>
CSS:
div { width: 100%; }
div div {
width: 33%;
background-color: salmon;
float: left;
position: relative
}
div div div {
background-color: pink;
position: relative;
z-index: 2
}
div div div:last-child {
background-color: red;
position: absolute;
width: 100%;
z-index: 1
}
.label { width: 100px }
The best option for this type of classic “GUI widget layout engine” layout is the CSS 3 flexbox feature, but browser support is not yet consistent enough that I would recommend using it.
Absent that, flexible "fill space" layouts generally require table layout. Thanks to CSS display, there is no particular necessity to write the table as a HTML table. The following example is similar to your example image:
<html><head>
<title>example</title>
<style type="text/css">
ul.myform { display: table; width: 100%; margin: 0; padding: 0; border-collapse: collapse; }
.myform li { display: table-cell; border: .1em solid gray; }
.myform li > * { display: table; width: auto; margin: .4em; }
.myform label { display: table-cell; width: 1%; padding-right: .4em; white-space: nowrap; }
.myform input { display: table-cell; width: 100%; }
.col1 { width: 33%; }
.col2 { width: 33%; }
.col3 { width: 34%; }
</style>
</head><body>
<form>
<ul class="myform">
<li class="col1"><span><label for="a">Label</label> <input id="a" name="a"></span></li>
<li class="col2"><span><label for="b">Label</label> <input id="b" name="c"></span></li>
<li class="col3"><span><label for="c">Label a bit longer</label> <input id="c" name="c"></span></li>
</ul>
</form>
</body></html>
There is exactly one element introduced solely for layout in the markup: the <span> is needed to serve as the table within the table-cell.
The width: 1%; of the label cell is not an actual dimension but simply to force it as narrow as possible (an absolute rather than percentage with will not have the same effect). The white-space: nowrap; prevents the label from getting wrapped due to this.
The .col1 and so on are for specifying the widths of the columns.