3 Column with float left, each with 33.33% width. And I added padding to make the column looks more neat. But apparently the last DIV is pushed to new line. Any solution for this one? Here also I come out with reproduction for reference.
* {
padding:0;
margin:0;
}
.row {
width:80%;
display:block;
margin:40px auto;
background: #f3f3f3;
overflow:auto;
}
.col {
float:left;
width:33.33%;
background:#333;
color:#fff;
text-align:center;
position:relative;
padding:20px
}
.ful-dark {
opacity:0.9
}
.mid-dark {
opacity:0.8
}
.lil-dark {
opacity:0.7
}
<div class="row">
<div class="col ful-dark"><h1>One</h1></div>
<div class="col mid-dark"><h1>Two</h1></div>
<div class="col lil-dark"><h1>Three</h1></div>
</div>
Use box-sizing: border-box, which forces the provided size to be the full size, including any order and spacing such as your padding.
* {
padding:0;
margin:0;
box-sizing: border-box;
}
.row {
width:80%;
display:block;
margin:40px auto;
background: #f3f3f3;
overflow:auto;
}
.col {
float:left;
width:33.33%;
background:#333;
color:#fff;
text-align:center;
position:relative;
padding:20px
}
.ful-dark {
opacity:0.9
}
.mid-dark {
opacity:0.8
}
.lil-dark {
opacity:0.7
}
<div class="row">
<div class="col ful-dark"><h1>One</h1></div>
<div class="col mid-dark"><h1>Two</h1></div>
<div class="col lil-dark"><h1>Three</h1></div>
</div>
Padding unfortunately doesn't count by default in sizing, so the width + padding makes each actually wider than a third. box-sizing: border-box is a wonderful tool to combat this, making all padding & borders part of the width measurement:
* {
padding:0;
margin:0;
box-sizing: border-box;
}
.row {
width:80%;
display:block;
margin:40px auto;
background: #f3f3f3;
overflow:auto;
}
.col {
float:left;
width:33.33%;
background:#333;
color:#fff;
text-align:center;
position:relative;
padding:20px
}
.ful-dark {
opacity:0.9
}
.mid-dark {
opacity:0.8
}
.lil-dark {
opacity:0.7
}
<div class="row">
<div class="col ful-dark"><h1>One</h1></div>
<div class="col mid-dark"><h1>Two</h1></div>
<div class="col lil-dark"><h1>Three</h1></div>
</div>
this is because of the padding. try putting box-sizing: border-box;, this will keep the container's width when a padding is declared.
* {
padding:0;
margin:0;
}
.row {
width:80%;
display:block;
margin:40px auto;
background: #f3f3f3;
overflow:auto;
}
.col {
float:left;
width:33.33%;
background:#333;
color:#fff;
text-align:center;
position:relative;
padding:20px;
box-sizing: border-box;
}
.ful-dark {
opacity:0.9
}
.mid-dark {
opacity:0.8
}
.lil-dark {
opacity:0.7
}
<div class="row">
<div class="col ful-dark"><h1>One</h1></div>
<div class="col mid-dark"><h1>Two</h1></div>
<div class="col lil-dark"><h1>Three</h1></div>
</div>
You want 3 * (padding-right + padding-left + width) to equal 100%.
Try
.col {
float:left;
width:31.33%;
background:#333;
color:#fff;
text-align:center;
position:relative;
padding:1%;
}
Related
I have two rows like this
<div class="container me">
<div class="message">
</div>
<div class="time">
</div>
</div>
<br />
<div class="container he">
<div class="message">
</div>
<div class="time">
</div>
</div>
with css like this
* {
padding:0;
margin:0;
}
.container {
width:500px;
height:50px;
outline:1px solid green;
}
.message {
width:250px;
height:50px;
border:1px solid red;
display:inline-block;
border-radius:5px;
position: relative;
}
.time {
width:50px;
height:50px;
background:orange;
}
.container.me .time {
float:right;
}
.container.he .time {
float:left;
}
and i am trying to make message block full possible width (100% minus time block), is it possible?
jsfiddle https://jsfiddle.net/Nerfair/t0t0q632/5/
You can set width for .message to width: calc(100% - 52px); - this 52px is a width of your .time div (50px) + 2px for borders of .message (left and right)
Edit: For IE8 support you cannot use that, so you can try the tricky thing like this: https://jsfiddle.net/L2pqhnsq/
How can I get the bottom box of the lefthand side to fill out the rest of the height of the div so the border goes down to the bottom of the box?
Right now the line stops where the content of the left box stops
HTML
<div id="container">
<div id="leftcolumn">
<div id="fixedbox">
Fixed size
</div>
<div id="restbox"><p>Fill out box</P></div>
</div>
<div id="rightcolumn">
<p>Dynamic content</p>
</div>
<br style="clear:both;" />
</div>
CSS
body {
background-color:#ccc;
}
#container {
margin:0 auto;
width:80%;
background-color: #fff;
}
#leftcolumn {
width:29%;
float:left;
border-right:1px solid #000;
}
#rightcolumn {
width:68%;
float:left;
margin-left: 2%
}
#fixedbox {
width:100%;
height:200px;
border-bottom: 1px solid #000;
}
#restbox {
width:100%;
}
http://jsfiddle.net/P6YQc/2/
Is there any reason why you don't have a left border on #rightcolumn instead of a right border on #leftcolumn ?
http://jsfiddle.net/P6YQc/7/
eg:
#leftcolumn {
width:29%;
float:left;
}
#rightcolumn {
width:68%;
float:left;
border-left:1px solid #000;
padding-left:10px;
box-sizing: border-box;
}
i have this CSS:
<style type="text/css">
#box {
width:100%;
height:80px;
background-color:#eeeeee;
}
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:center;
}
#text, #text a {
font-size:16px;
color:#F36F25;
margin:10px;
}
#text:hover, #text a:hover {
color:#666666;
text-decoration:none;
}
#text img {
vertical-align: middle;
margin-right:20px;
}
</style>
its currently displaying the image and text inline but i have multiple images/text below each other. how can i make all the images align in the same position below each other?
here is a fiddle: http://jsfiddle.net/8dsTu/
http://jsfiddle.net/8dsTu/4/
<div id="text">
<img src="../images/icons/address.png" height="60" />
<div style="display:inline-block;">
Address 1,<br />
Address 2,<br />
County Post Code
</div>
</div>
Edit css:
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:left;
margin-left:100px;
}
Your HTML is invalid, id property is meant to be unique and you have a few <div> elements with id="text". To get what you want you'll have to: (jsFiddle)
replace all id="text" with class="text" and add <div class="caption"> to wrap each of the captions:
<div id="box">
<div class="box-inner">
<div class="text">
<img src="../images/icons/telephone.png" height="60" />
<div class="caption">00000 00 00 00</div>
</div>
<div class="text">
<img src="../images/icons/email.png" height="60" />
<div class="caption">sales#domain.co.uk</div>
</div>
<div class="text">
<img src="../images/icons/address.png" height="60" />
<div class="caption">Address 1,<br />Address 2,<br />County Post Code</div>
</div>
</div>
</div>
Adjust the css:
#box {
width:100%;
height:80px;
background-color:#eeeeee;
}
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:center;
}
.text, .text a {
font-size:16px;
color:#F36F25;
margin:10px;
}
.text:hover, .text a:hover {
color:#666666;
text-decoration:none;
}
.text img {
vertical-align: middle;
margin-right:20px;
}
.caption{ /* This is the new bit - display:inline-block does the trick. adjust margin-top to your needs */
display:inline-block;
vertical-align:top;
margin-top:15px;
}
#box {
width:100%;
background-color:#eeeeee;
}
.box-inner {
width:80%;
margin:0 auto 0 auto;
text-align:center;
}
.text, .text a {
font-size:16px;
color:#F36F25;
}
.text:hover, .text a:hover {
color:#666666;
text-decoration:none;
}
.text img {
vertical-align: middle;
margin-right:20px;
width: 60px;
background: black;
float: left;
}
.text {
overflow: hidden;
width: 250px;
margin: 10px auto;
}
Something like this? But you must replace your id's with classes.
I have a minor issue here. I'd like to center the red div and have the two green divs float to the right. The two right divs appear to drop down?
http://jsbin.com/ewihuh/1/edit
HTML
<div class="headertop">
<div class="centerblock">Centered</div>
<div class="right1">right 1</div>
<div class="right2">right 2</div>
</div>
CSS
.headertop {
width:100%;
height:30px;
background:black;
}
.centerblock {
color:white;
text-align:center;
background:red;
width: 200px;
margin: 0px auto;
}
.right1, .right2 {
color:white;
float:right;
width:100px;
background:green;
}
Live Demo
Hi now change to your html code and some change to css
Css
.headertop {
width:100%;
background:black;
text-align:center;
}
.centerblock {
color:white;
text-align:center;
background:red;
width: 200px;
margin:0 auto;
}
.right1, .right2{
color:white;
float:right;
width:100px;
background:green;
}
HTML
<div class="headertop">
<div class="right1">right 1</div>
<div class="right2">right 2</div>
<div class="centerblock">Centered</div>
</div>
HTML
<div class="headertop">
<div class="centerblock">Centered</div>
<div class="rights">
<div class="right1">right 1</div>
<div class="right2">right 2</div>
</div>
</div>
CSS
.headertop {
width:100%;
height:30px;
background:black;
text-align:center;
position:relative;
}
.centerblock {
color:white;
text-align:center;
background:red;
width: 200px;
margin: 0 auto;
}
.rights {
position:absolute;
right:0;
top:0;
width:100px;
}
.right1, .right2 {
color:white;
width:50px;
background:green;
float:left;
}
DEMO: http://jsbin.com/ewihuh/7/edit
I have 10 sets of DIVs nested in a parent DIV:
<div id="bar_block">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
<div class="bar bar4"></div>
<div class="bar bar5"></div>
<div class="bar bar6"></div>
<div class="bar bar7"></div>
<div class="bar bar8"></div>
<div class="bar bar9"></div>
<div class="bar bar10"></div>
</div>
I've used this CSS so far:
#bar_block {
width:350px;
height:75px;
}
.bar {
border:1px solid #000;
width:8%;
float:left;
margin-right:5px;
}
.bar1 {
height:10%;
}
.bar2 {
height:20%;
}
.bar3 {
height:30%;
}
.bar4 {
height:40%;
}
.bar5 {
height:50%;
}
.bar6 {
height:60%;
}
.bar7 {
height:70%;
}
.bar8 {
height:80%;
}
.bar9 {
height:90%;
}
.bar10 {
height:100%;
margin:0;
}
I wanted all of the bars to float left bottom. Absolute position didn't work for me since all of the bars will cramped together. Any ideas?
Try changing the CSS for the container and divs to:
#bar_block {
width:360px;
height:75px;
position:relative;
}
.bar {
border:1px solid #000;
width:24px;
bottom:0;
display:inline-block;
margin-right:2px;
}
The inline-block combined with the bottom and pixel width should do it.
jsFiddle example.