I'm adding padding to my left table cell but center and right cell also gets top padding. How do I remove padding from center and right cell?
the center and right cells are still top padded.
http://jsfiddle.net/o50s8ucj/
<!doctype html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.left, .center, .right {
display: table-cell;
width: 100px;
height: 50px;
}
.center, .right {
display: table-cell;
width: 100px;
padding: 0;
}
.left {
padding: 10px;
background: yellow;
}
.center {
background: pink;
}
.right {
background: orange;
}
</style>
</head>
<body>
<div class="left">a</div>
<div class="center">b</div>
<div class="right">c</div>
</body>
</html>
I think what you want is to use vertical-align:top;
.left, .center, .right {
display: table-cell;
width: 100px;
height: 50px;
vertical-align:top;
}
Demo: http://jsfiddle.net/o50s8ucj/2/
When executed in the fiddle shared by you, it is padded only in the left and center,right remains without padding
I think you need to add text-align: center and vertical-align : middle property to your class .left, .center and .right.
see this JS fiddle link : http://jsfiddle.net/4gnrnwka/
Hope this will help you.
If you replace display:table-cell with display:inline-block the padding on top of the center and right rectangles is eliminated as follows:
* {
margin: 0;
/*padding: 0;*/
}
.left, .center, .right {
width: 100px;
height: 50px;
}
.center, .right {
display: inline-block;
width: 100px;
padding: 0;
}
.left {
display: inline-block;
padding: 10px;
background: yellow;
}
.center {
background: pink;
}
.right {
background: orange;
}
Also see http://jsfiddle.net/o50s8ucj/6/
Only the left cell is getting top padding, center and right cells are padding-free.
Related
I have two inline-block divs, each 50% width of its parent, and they are correctly shown next to each other. But, when I add a link to one of those divs, there's a gap on top of the second div
<div class="wrap">
<div class="resizable resizable1">
link1
link2
</div><!--
--><div class="resizable resizable2">second</div>
</div>
.wrap {
width: 100%;
font-size: 0;
}
.resizable {
width: 50%;
height: 120px;
background-color: coral;
display: inline-block;
}
.resizable2 {
background-color: lightblue;
}
.resizable a {
font-size: 12px;
}
Jsfiddle example http://jsfiddle.net/KyEr3/455/
How can align the two divs?
When using display: inline-block elements by default are set to baseline, instead set vertical-align: top
.resizable {
width: 50%;
height: 120px;
background-color: coral;
display: inline-block;
vertical-align: top;
}
FIDDLE
You can also float them both left, they will align next to each other in the wrapper.
.wrap {
width: 100%;
font-size: 0;
}
.resizable {
width: 50%;
height: 120px;
background-color: coral;
display: inline-block;
float:left;
}
.resizable2 {
background-color: lightblue;
float:left;
}
.resizable a {
font-size: 12px;
}
Please see http://jsfiddle.net/jr32V/ which contains the following:
CSS:
body {
font-size: 2em;
color: white;
background-color: grey;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.topmenu, .main {
width: 500px;
margin: 0 auto;
}
.topmenu {
background-color: red;
}
.main {
background-color: black;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
}
.maincontent {
width: 600px; /*get rid of this line to see how it should look*/
float: left;
background-color: blue;
}
HTML:
<body>
<div class="topmenu">
A whole bunch of menu stuff
</div>
<div class="main">
<div class="mainpicker">
Picker
</div>
<div class="maincontent">
Content on right of picker
</div>
</div>
</body>
I would like the "maincontent" div to be exactly to the right of "mainpicker", just as it seems if you remove the width attribute on it.
Note that the width attribute is just to illustrate the point, in actual use the width may go beyond the container by any amount.
Also note that I do not want the parent container ("main") to exactly expand, since it must begin at the same left position as "topmenu". i.e. that they both have the same width vis-a-vis centering/margin-auto calculation
I think this is what you are looking for. Add width and margin to your .main class and remove float:left; from your .maincontent class. I updated your fiddle
.main {
background-color: black;
width:500px;
margin:0 auto;
}
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
width:100px;
}
.maincontent {
width: 600px;
background-color: blue;
}
EDIT:
If you want to float both children you have to stay inside the given width of you parent class. So your code would look like this:
.topmenu {
background-color: red;
width:500px;
margin:0 auto;
}
.main {
width:500px;
margin:0 auto;
}
.mainpicker {
background-color: green;
width:100px;
float:left;
}
.maincontent {
background-color: orange;
width:400px;
float:left;
}
You can watch it here
The following code seemed to do the trick, even though the result doesn't look pleasing to the eye.
.mainpicker {
margin-right: 20px;
float: left;
background-color: green;
display: inline-block;
position: relative;
}
.maincontent {
width: 600px;
float: left;
background-color: blue;
display: inline-block;
position: absolute;
width: auto;
}
DEMO: http://jsfiddle.net/thauwa/jr32V/5/
http://jsfiddle.net/jr32V/6/
i put box-sizing: border-box; and width as percentages to mainpicker and maincontent
.mainpicker {
float: left;
background-color: green;
width: 20%;
box-sizing: border-box;
}
.maincontent {
float: left;
background-color: blue;
width: 80%;
box-sizing: border-box;
}
does this help you?
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.
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