I have problem using width:100%, it does not stretch to entire screen width but if I specify it using pixels, it will work. I don't understand how it works. I want to use percentage to adjust automatically on any screen sizes.
/*width: 600px; */ /* THIS WILL WORK */
width: 100%; /*WON'T WORK*/
JSFiddle: http://jsfiddle.net/utBRH/9/
CSS:
#wrapper{
width:600px;
height:600px;
position:relative;
}
#search_box {
background-color:#050505;
height:300px;
/*width: 600px; */ /* THIS WILL WORK */
width: 100%; /*WON'T WORK*/
display: table-cell;
vertical-align: middle;
text-align: center;
}
#btn_search_orange{
display: inline-block;
width: 40%;
height: 80%;
text-align: left;
background-color:#e47700;
}
#btn_search_black{
display: inline-block;
width: 40%;
height: 80%;
text-align: left;
background-color:#555454;
}
Inorder to make that work, you need to assign display: table; and width: 100%; to the parent element because child element is set to display: table-cell;
#wrapper{
height:600px;
position:relative;
display: table;
width: 100%;
}
Demo
Note: I don't find any legit reason to use display: table;, as you can achieve the same thing using floats with an ease.
display: table-cell;
is the problem, why don't use just the block type?
Try removing display: table-cell;
Related
I'm working on a layout with 100% height sections and have been struggling to make this sections expand with the content when necessary.
I've tried height: auto; min-height: 100%; but it doesn't work.
Here's a FIDDLE
Use
.wrapper {
height: 100vh; /* vh instead of % */
}
For some reason - which I have no time to investigate further at this point - this solves it only if I reduce your markup to the relevant minimum, see the fiddle:
https://jsfiddle.net/jt49a064/6/
This should serve you as a starting point to fix it yourself now.
try this in your css
display:inline-block;
does this work for you??to change it itself you need to use auto instead of %
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
color: white;
}
.wrapper {
width:auto;
height: auto;
background: SkyBlue;
}
.container {
width: auto;
height: auto;
background: green;
}
.table {
display: table;
width: auto;
height: auto;
}
.row {
display: table-row;
width: auto;
}
.cell1, .cell2, .cell3 {
display: table-cell;
width: 33%;
}
.cell1 {
background: blue;
}
.cell2 {
background: red;
}
.cell3 {
background: LightSalmon;
}
You can use display: table; and table-row for you containers :
In the CSS for the parent write this :
display: parent;
For the children :
display: table-row;
I have two DIVs inside a parent div. I want them to be:
So I searched for examples of this because it is such a trivial problem. I tried a few examples from SO but it didn't seem to make any difference for my example. I tried vertical-align: middle; and inline-block but without any success. Here is my fiddle.
http://jsfiddle.net/Sz2fU/1/
HTML
Play A
CSS
.parentBox
{
height: 100px;
}
.left_box
{
display: inline-block;
vertical-align: middle;
background:green;
float:left;
}
.right_box
{
width: 18%;
height: 100%;
display: inline-block;
vertical-align: middle;
background:blue;
float:right;
}
.inputBox
{
height:80px;
}
In order for vertical-align to work in a table we will have to use table-cell
Try this:
Add display:table; and width:100%; to .parentBox
Remove float from .left_box and .right_box
Add display: table-cell; and text-align:center; to .left_box and .right_box
You needed to add text-align:center; to center the input to the middle.
JSFiddle Demo
More info here for vertical alignment.
Note: IE7 and below do not support display:table; or display: table-cell;
The trick here is to use display: table for the parent div and display: table-cell for the children; otherwise, vertical-align is not respected.
JSFiddle: DEMO
.parentBox {
width: 100%;
height: 100px;
border: 1px solid lime;
display: table;
}
.left_box,
.right_box {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.left_box {
background:green;
}
.right_box {
width: 18%;
height: 100%;
background:blue;
}
.inputBox {
height:80px;
}
Add line-height: 100px to the parent div. Vertical-align:middle refers to line-height, so setting it up to the height of the block will do the job. Just don't forget to reset line-height to normal on children (otherwise, they will be with line-height: 100px too and if text in it more than one line you get huge block).
I am trying to center 3 boxes in the middle of my container. However, I cannot get it working.
What am I doing wrong?
HTML
<div id="boxes">
<div class="box">Box1</div>
<div class="box">Box2</div>
<div class="box">Box3</div>
</div>
CSS
#boxes {
width: 800px;
background-color: yellow;
float: left;
}
#boxes .box {
width: 100px;
height: 100px;
margin: 10px;
float: left;
background-color: blue;
}
JSFiddle with the problem: http://jsfiddle.net/3cUF5/
If you need a crossbrowser solution, then use display: inline-block for inner boxes and align with text-align: center on parent.
Example fiddle: http://jsfiddle.net/RhBEz/1/
Css
#boxes {
width: 800px;
background-color: yellow;
float: left;
text-align: center;
}
#boxes .box {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px;
background-color: blue;
}
A second approach is using display: flex, but this will work only on recent Chrome and Firefox:
Example: http://jsfiddle.net/2mxET/1/
Css
#boxes {
width: 800px;
background-color: yellow;
float: left;
display: flex;
justify-content:center;
}
#boxes .box {
width: 100px;
height: 100px;
margin: 10px;
background-color: blue;
}
Using float: left on .box means they cannot be centered. You also needed to add text-align: center to #boxes
Please see a working version here http://jsfiddle.net/s455x/
Just add margin:0 auto; for #boxes
CSS
#boxes {
width: 800px;
background-color: yellow;
float: left;
margin-left:auto;
margin-right:auto;
}
Now your outer container #boxes is aligned to center
http://jsfiddle.net/3cUF5/2/
#boxes {
text-align: center;
}
#boxes .box {
float: left; /* removed this line */
display: inline-block;
}
When you're trying to center elements, it's not a good idea to use floats. You have two basic options when centering elements.
do display: inline-block; to the child elements, and text-align: center; to the parent element
or
do display: block; to the element you want centered, as well as margin: 0 auto;
Not sure what browsers' you are trying to support but FlexBox makes this super easy, and if non-supported browsers are a requirement then you can just provide a fallback that works.
I've got this structure:
<div id="preview">
<div class="small">preview</div>
<div id="prev_content"></div>
</div>
and the following CSS rules:
#preview {
position:absolute;
display: table;
top:160px;
left:10px;
width:457px;
height:125px;
max-width: 457px;
max-height: 125px;
border-radius: 20px;
background-image:url(../images/preview_greetings.png);
color: #FFF;
font-family: shofar;
font-size:27px;
padding-right:130px;
padding-left:20px;
overflow: hidden;
}
#preview div.small{
position: absolute;
top:-40px;
left:0px;
text-align: center;
width:607px;
color:black;
font-size:30px;
}
#prev_content{
max-width: 100%;
overflow: hidden;
max-height: 102px;
display: table-cell;
vertical-align: middle;
}
but for some reason, if I have overflow text, it just keeps expanding the div and doesn't stop.
Here's a fiddle:
http://jsfiddle.net/sTGpf/
How can I make it stop growing when it has reached it's limitation? The reason im using table display is because I need vertical alignment.
display:table-cell is causing the height to expand based on content. Use a wrapper around the div and set the required style for vertical alignment. And for the DIV with actual content, set the max-height:102px;
#prev_content{
max-width: 100%;
max-height:102px;
}
#wrapper
{
vertical-align:middle;
display:table-cell;
max-height:102px;
}
Fiddle
Instead of using display: table to center, you could use Centering in the Unknown.
Demo
#preview {
height:125px;
font-size:0; /* To avoid extra spaces */
}
#preview:before {
content: '';
height: 100%;
}
#preview:before, #prev_content {
display: inline-block;
vertical-align: middle
}
#prev_content{
overflow: hidden;
max-height: 102px;
font-size: 27px;
}
Remove display: table-cell; from #prev_content and it will respect the max-height: 102px;
Demo: http://jsfiddle.net/sTGpf/3/
Have a class for the page, a container class for rows of div-boxes, and box class to style all of the boxes..
The rows of div-boxes need to be centered on the page..
What combination of width + display + margin is required (cross-browser)?
The boxes are floating-left, which seems to be the origin of the question..
Current CSS:
.page {
width: 100%;
}
.container {
width: 100%;
display: block;
margin: 0 auto;
}
.box {
float: left;
margin: %;
}
You'd want to use display:inline-block in your boxes, effectively treating them like text and then set text-align:center in your container
.container {
width: 100%;
display: block;
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 200px;
height: 200px;
background: grey;
}
Demo fiddle
I made a jsFiddle. Its fixed width. my question is how many .box elements will there be?
if its dynamic then use some javascript to work out the widths of '.box'
http://jsfiddle.net/james_nicholson/4P9s8/10/
.page {
width: 100%;
border:1px solid black;
height:auto;
}
.container {
width: 440px;
display: block;
margin: 0 auto;
background:blue;
min-height:500px;
}
.box {
float: left;
width: 100px;
background: red;
margin: 5px;
display: block;
height: 100px;
}