I have three columns with percentage widths and i am using word spacing, padding and negative margins in order to put the columns with a gutter in between. When i use the text-align property with values right and center chrome and firefox render the position of the columns very different.
the code is as follows:
body {
width: 800px;
margin: 0 auto;
}
.container {
box-sizing: border-box;
background-color: black;
font-size: 0;
height: 500px;
word-spacing: 36px;
padding-right: 24px;
text-align: right;
}
.item-1, .item-2, .item-3 {
box-sizing: border-box;
display: inline-block;
vertical-align: top;
height: 200px;
margin-right: -24px;
font-size: 16px;
text-align: left;
}
.item-1{
background-color: red;
width: 20%;
}
.item-2 {
background-color: green;
width: 40%;
}
.item-3 {
background-color: yellow;
width: 20%;
}
with the following html:
<div class="container">
<div class="item-1">A</div>
<div class="item-2">B</div>
<div class="item-3">C</div>
</div>
You can see a fiddle live version here.In the example with text align set to right firefox do what i expect but chrome puts part of the columns out of their container box, is there any way to fix this? or is just and edge case without solution?
Related
RE this on eBay: http://www.ebay.com/itm/281670060888
On my own site (at http://sallymilo.com/template-din.html) and when running on my own computer, the right side div aligns to the top of the left side div, but when I put it on eBay, the right side div is below the left - even if I make the tabbed section 200 pixels narrower.
A bit of the main CSS:
.row1 {
width: 100%;
position: relative;
float: left;
background: url(https://myimagefiles.com/dinnerman/tbg.png);
}
.row1l {
width: 26%;
position: relative;
margin-left: 2em;
float: left;
}
.row1r {
width: 64%;
position: relative;
margin-left: 2em;
margin-right: 2em;
float: left;
}
And a bit of the tabbed section CSS:
.tabholder {
width: 100%;
height: 14em;
font-size: 16px;
}
/* base font size for em-scaling */
.tabholder div.tabtops {
width: 100%;
max-width: 550px;
}
The issue is that in ebay the width of the container is lower than 1000px.
The because of the fact that your inner sections with hardcoded widths they break.
I suggest you to use width with %, in that way not matter what will be the with of the container the inner sections will take the number of the percentage that you gave.
.container {
margin: 20px;
background-color: rgba(0,0,0,0.2);
overflow: hidden;
}
.col-1 {
width: 20%;
background-color: rgba(0,0,0,0.2);
float: left;
}
.col-2{
width: 80%;
background-color: rgba(0,0,0,0.5);
float: left
}
<div class="container">
<div class="col-1">col-1</div>
<div class="col-2">col-2</div>
</div>
I have trouble coding a 1px horizontal seperator line with a logo displayed in the center as pure CSS. Should look like this:
Divider with logo centered
There is a problem with multiple instances: When I add more dividers on a single page only one or two will be displayed with a line, the others will just display the logo.
A question about a centered logo was answered here - but none adressed the bug that happens with multiple instances: Divider with centred image in CSS?
Here is a adapted solution out of that discussion, fiddle below.
CSS:
body {
margin: 0;
background: white;
}
header:after {
content: '';
display: block;
width: 100%;
height: 1px;
background: #ccc;
margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}
.logo {
position: relative; /* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 40px;
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
HTML:
<body>
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logo">
</div>
</header>
</body>
The fiddle:
http://jsbin.com/delixecobi/edit?html,css,output
I totally changed the CSS. Give the .logo a position: relative and :after a position: absolute. You are using it for one single header. That's why it didn't work.
body {
margin: 0;
background: white;
}
.logo:after {
content: ' ';
display: block;
width: 100%;
height: 1px;
background: #ccc;
position: absolute;
top: 50%;
margin-top: -1px;
left: -50%;
width: 200%;
}
.logo {
position: relative; /* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 40px;
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logo">
</div>
</header>
Preview
If you want the line not to cross or cut, use a negative z-index.
I found a solution also for my question how to get text centered within the div - thanks to web-tiki for his approach here: Line before and after title over image
In the JSBin I put all together and formatted / commented it a bit to make it easy to work with. You will find:
divider formats with img, text and text in multiple lines
stable in multiple instances
body {
margin: 0;
background: white;
}
.logo:after {
content: ' ';
display: block;
width: 100%;
height: 1px;
background: #ccc;
position: absolute;
top: 50%;
margin-top: -1px;
left: -50%;
width: 200%;
z-index: -1;
}
.logo {
position: relative;
/* Brings the div above the header:after element */
width: 200px;
height: 100px;
padding: 20px;
/* also padding between line and logo */
margin: 0 auto;
background: white url("http://placehold.it/200x100") no-repeat center center;
}
.logo img {
display: block;
}
.logotext {
width: 100%;
margin: 20 auto;
overflow: hidden;
text-align: center;
font-weight: 300;
color: green;
/* color text */
}
.logotext:before,
.logotext:after {
content: "";
display: inline-block;
width: 50%;
margin: 0 20 0 -55%;
/* 2nd no: space text to line on the left */
vertical-align: middle;
border-bottom: 1px solid #ccc;
/* last: color line */
}
.logotext:after {
margin: 0 -55% 0 20;
/* last no: space text to line on the right */
}
span {
display: inline-block;
vertical-align: middle;
}
<header>
<div class="logo">
</div>
<div class="logo">
</div>
<div class="logotext">
somesome</div>
<div class="logotext">
somesome</div>
</header>
One major drawback to this solution is that it does not allow the width of the line to be defined to % of the main viewport.
I'm trying to layout a screen using div's and CSS. It's a simple layout at this point but I can't seem to get the div's to line up. I want one wrapper div with two div's within it: one aligned to the left and one aligned to the right. However, they end up on top of each other.
I know this question is simple. What am I missing here?
If I reduce the width of the right div to 60% it lines up right but shouldn't I be able to use 100% of the width of the parent div?
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
Float left your children elements:
jsBin demo
#product_wrapper > *{float:left;}
Note that inline-block causes the inner elements to actually act like inline elements
where white spaces count!
SO another way would be to modify your HTML removing the NewLine separator:
jsBin demo
<div id="images_wrapper">
Foo content
</div><div id="content_wrapper">
^^-------------------------------------- no space here
Bar content
</div>
The third way (the worst one) is to set font-size to 0 for the parent (will remove logically the child's white-space gap since is now '0'); >> and than reset the font-size for children elements to px (cause em will not work since parent has 0).
But that's a good way to loose track of dynamic and responsive font sizes expecially if you use em and size inheritances.
The problem is the whitespace in the html, which occupies some space between the elements.
One way of fixing it is
#product_wrapper {
font-size: 0; /* Hide whitespace in the html */
}
#images_wrapper, #content_wrapper {
font-size: 16px; /* Reset to whatever vaue */
}
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
font-size: 0;
}
#images_wrapper, #content_wrapper {
font-size: 16px;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
Use float:left instead of display:inline-block
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
float:left;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
float:left;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
I was wrote this source code just for example, I was manual enter padding-top 90px for h2 tag for example what i want; but when remove padding text is not centered vertical. This is not problem when i know bluebox div height but some times this is 200px, some times 900px.
.bluebox
{
width: 400px;
background-color: blue;
height: 200px;
}
.bluebox h2
{
font-family: Arial;
font-size: 10pt;
text-align: center;
padding-top: 90px;
}
<div class="bluebox"><h2>Hi i am a text, now I am only horizontal centered<h2></div>
Demo: http://jsfiddle.net/5UJWa/
.bluebox {
width: 400px;
background-color: blue;
height: 200px;
position: relative; /* allow absolute positioning within */
}
.bluebox h2 {
font-family: Arial;
font-size: 10pt;
text-align: center;
position: absolute; /* positioning */
top: 50%; /* 50% from the top (half way) */
margin-top: -5pt; /* bring it back up half the height of your text size */
width: 100%; /* to allow for the text align */
}
Example at http://jsfiddle.net/zTPgh/1/ - Change the height of the container and run or update to see it in action.
You can play with display: table-cell;.
Your new CSS:
.bluebox {
width: 400px;
background-color: blue;
height: 150px;
display: table-cell;
vertical-align: middle;
}
.bluebox h2 {
font-family: Arial;
font-size: 10pt;
text-align: center;
}
Check out the illustration on jsFiddle.
See my tutorial here which will vertically align and center text and images. DON'T rely on line-heights as you'll have huge gaps between lines of text. http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html
I have Create one demo for vertical image center and text also i have test on firefox ,chrome,safari, internet explorer 9 and 8 too.
It is very short and easy css and html, Please check below code and you can find output on screenshort.
HTML
<div class="frame">
<img src="capabilities_icon1.png" alt="" />
</div>
CSS
.frame {
height: 160px;
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
.frame::before {
display: inline-block;
height: 100%;
vertical-align: middle;
content:"";
}
img {
background: #3A6F9A;
vertical-align: middle;
}
For aligning an element vertically center, I have used css3 calc() function. It's perfectly working in all the latest browsers including ie11 and edge.
Check it live here https://jsfiddle.net/ashish_m/ebLxsxhk/
.calcTest { width: 250px; height: 250px; border:1px solid #e0e0e0; text-align: center; }
.calcTest .calcTestInner { width: 50px; height: 50px; background: #e0e0e0;
margin: 0 auto; margin-top: calc(50% - 25px); vertical-align: top; }
<div class="calcTest">
<div class="calcTestInner">
Hello Folks
</div>
</div>
I'm having difficulty creating a 3 column layout with 3 divs. The left div needs to be a fixed width. The middle and right divs need to have fluid widths. When the browser is horizontally re-sized, the middle and right divs need to resize in a proportional manner.
I've seen some examples of 3 column fluid layouts with other fixed columns, but not for a fixed-fluid-fluid layout.
Markup to replicate my problem is below. The CSS is a little verbose, as I've been troubleshooting this. When I resize the browser the right div disappears below the horizontal line. Also, the 3 columns should take up 100% of the width of #caption_stripe, but they do not. There is about a 2-3 pixel gap that shows up on the right side.
<html>
<head>
<style>
.contentMain {
clear: both;
overflow: hidden;
width: 100%;
max-width: 1024px;
margin: 0 auto 0 auto;
}
#lessons_wrapper { background-color: blue; }
#caption_stripe {
position: relative;
overflow: hidden;
height: 37px;
width: 100%;
max-width: 1024px;
font-family: Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
font-size: 11pt;
font-weight: bold;
text-align: center;
color: white;
margin: 0;
padding: 0;
}
#caption_subjects {
float: left;
height: 37px;
background-color: #3c3d3d;
width: 13%;
max-width: 138px;
min-width: 138px;
margin: 0;
padding: 0;
}
#caption_topics {
float: left;
height: 37px;
background-color: #707070;
width: 42%;
max-width: 422px;
min-width: 100px;
margin: 0;
padding: 0;
}
#caption_modules {
float: left;
height: 37px;
background-color: #989898;
width: 45%;
max-width: 464px;
min-width: 100px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="contentMain">
<div id="lessons_wrapper" style="display:block">
<div id="caption_stripe">
<div id="caption_subjects">SUBJECTS</div>
<div id="caption_topics">TOPICS</div>
<div id="caption_modules">MODULES</div>
</div>
<br style="clear:both;" />
</div>
</div>
</body>
</html>
I'll also need to do this on a bigger scale with divs that will appear below this caption. For now, if I can get an example of this working, I can probably get those working as well.
Thanks for your help.
Ok not sure why you had a % width on the first column if it is to be fixed.
But the main thing to note is, putting your fluid divs into a wrapping div. Then give your wrapper a left padding equal to the width of your fixed column.
.fluid-wrapper {
width: 100%;
height: 100%;
padding-left: 100px;
}
For this to work you will need to apply box-sizing to the wrapper. This means the padding will be deducted from the inner width of your wrapper, rather than added.
Its reasonably safe to use box-sizing on all elements, which can help greatly when creating fluid/responsive designs.
*, *:after, *:before {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
Here is a working JSFiddle: http://jsfiddle.net/nhwGA/1/