I'm using display:flex ,
I'm working with a ul list of elements. Don't know Why i get 2 different Result :
Problem issue with chrome :
Browsers_Pic
This is what I'm trying to do:
http://jsfiddle.net/0fbdgfcq/26/
ul {
max-width:800px;
display: flex;
flex-direction: row-reverse;
background-color: blue;
height: 100px;
max-width: 500px;
min-width: 100px;
padding:0;
}
.box{
/* Clean */
}
.g p{
white-space:nowrap;
text-align:center;
color:white;
text-decoration:none;
font-size:3vw;
}
.g li {
flex: 1 0;
width: 15%;
height: auto;
color:white;
font-size:3vw;
list-style-type: none;
word-wrap: break-word;
}
.g img {
width: 100%;
height: 100%;
max-width:100px;
max-height:100px;
}
Off-hand I'd say the problem is the width:15% you have applied which is overriding the flexing of the list items.
Try
.g li {
flex: 1 0 15%;
}
JSfiddle
Try adding the following:
ul {
Position: relative;
}
.g p {
Position: relative
}
This is to prevent your paragraph from overflowing.
That might fix the issue.
If not try adding it to your li as well.
Related
A friend and I are working on a website, but for some reason there is still white space when I use 100% width. How can I fix this? These are the main css elements
#info_container{
height:100%;
width:100%;
display:inline-block;
padding-top:3%;
background-color:#D3D3D3;
}
#main_header {
background: -webkit-linear-gradient(#2a2a2a, #545454);
text-align: center;
align-items: center;
vertical-align: middle;
position: absolute;
width:100%;
height:8%;
margin:-1em;
position:fixed;
display: table;
width: 100%;
table-layout: fixed;
/* For cells of equal size */
}
JSFiddle
First best practice is to put universal selector * { padding: 0; margin: 0;}
to avoid the margins and paddings overflow.
I updated your fiddle
Changes to your CSS
* { padding: 0; margin: 0; }
#main_header {
background: -webkit-linear-gradient(#2a2a2a, #545454);
text-align: center;
align-items: center;
vertical-align: middle;
position: absolute;
width:100%;
position:fixed;
display: table;
width: 100%;
table-layout: fixed;
/* For cells of equal size */
}
#main_header a {
display:inline-block;
text-decoration:none;
color:#567aa9;
display: table-cell;
vertical-align: middle;
padding:.5%;
}
a span {
text-decoration:none;
color:#878787;
font-size:55px;
top: 10%;
overflow: hidden;
left:50%;
}
.a1:hover {
color:#bababa;
}
.a2:hover{
color:#bababa;
}
.a3:hover{
color:#bababa;
}
.a4:hover{
color:#bababa;
}
#info_container{
height:100%;
width:100%;
display:inline-block;
padding-top:7%;
}
html {
font-size: 62.5%;
}
body {
font-size: 1em;
}
#media (max-width: 300px) {
html {
font-size: 70%;
}
}
#media (min-width: 500px) {
html {
font-size: 80%;
}
}
#media (min-width: 700px) {
html {
font-size: 120%;
}
}
#media (min-width: 1200px) {
html {
font-size: 200%;
}
}
#info_container{
height: 100px; // changed this from 100%;
width:100%;
padding-top: 3%; // removed
display:inline-block;
background-color:#D3D3D3;
}
EDIT: UPDATED THE FIDDLE
There is a very simple fix to this. You have a background color on your text which goes on the whole line, so to make it only on the text area in your info container, simply put that text into a span class. Now just remove that background color from the original class and put it into your span! You can give a class to the span if you will put it into another css file, but I have just put it directly into the html here.
<p><span style="background-color:red;">Hello World</span></p>
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'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;
}
I have following HTML for a heading. The .left and .right are empty spans. I have specific width for the .left and but the .text width is not always same. I want to set the background for the .left (fixed width) and the .right. The .right should get all the remaining space in the parent element (h1). How that can be done?
<h1>
<span class="left"></span>
<span class="text">Text</span>
<span class="right"></span>
</h1>
I'm trying following CSS which does not work:
.left{
background: yellow;
width: 30px;
height: 20px;
display: inline-block;
}
.right{
display: inline-block;
background: blue;
}
Here's the JSFiddle link:
http://jsfiddle.net/jMR8u/
Here's what I'm trying to get:
The idea is to set a background image in h1 except the .text span and the problem is that I can not set the background for the .text, otherwise it would be easier.
This version will stretch to fit the contents of .text and should be cross-browser.
You can fake the blue (right) background by making it a border of .text:
.text { border-right: 1000px solid; }
Then, shift .right to the left by 1000px:
.right { margin-left: -1000px; }
Give a width to .left, make each element inline-block, hide the extra blue border on the right, and make sure .text and .right do not wrap to a new line:
.left { width: 200px; }
.left, .text, .right { display: inline-block; }
h1 { overflow: hidden; white-space: nowrap; }
And give it color!
body { background: green; }
.left { background: red; }
.text { border-color: blue; }
Here is a JSFiddle demonstration:
if i interpret your image correct .. this is the answer http://jsfiddle.net/jMR8u/4/
h1{
border: 1px solid red;
position: relative;
}
.left{
background: yellow;
width: 30px;
height: 20px;
display: inline-block;
}
.right{
display: inline-block;
background: blue;
position: absolute;
z-index: 99;
height: 20px;
width: 100%;
}
.text {
height: 20px;
width: 150px;
display: inline-block;
position: relative;
z-index; 101;
}
ok, then use layers .. with z-index and positioning
You could use flexbox (but use the new syntax). Sadly, it only works on Chrome and Opera for now, so this has limited usefulness:
h1 { display: -webkit-flex; display: flex; }
.left { width: 30px; }
.right { flex: 1; -webkit-flex: 1; } /* This makes it fluid. */
.left { background: yellow; }
.right { background: blue; }
Here is a JSFiddle demonstration: http://jsfiddle.net/FN7vQ/
if you can set width to the .text span and h1 element.
body{
background:green;
}
h1{
border: 1px solid red;
display:table;
width:100%;
}
.left{
background: yellow;
width: 30px;
display: table-cell;
}
.right{
display: table-cell;
background: blue;
}
.text {
display:table-cell;
width: 150px;
}
If I understood your requirement correctly. you should change your markup a little bit as below
h1 {
background: #660000;
padding-left: 30px;
line-height: 1.1;
}
h1 span {
background: #fff;
padding: 0 3px;
color: #600;
}
<h1>
<span>
Lorem, ipsum dolor. you are doing great
</span>
</h1>
and CSS goes here below