floating two divs next to each other at all times? - html

I'm trying to put two divs next to eachother at all times and so far nothing seems to work..
the divs width has to be 50% of the screen!
I need all the divs to have the same class as well so I can't do:
div1
div2
div1
div2
etc...
here is what I have done so far:
http://jsfiddle.net/dp8yktcg/
and this is the simple CSS:
.baners{
width: 50%;
height: 65vw;
border:solid 1px #D8D8D8;
display:inline-block;
background:#FFF;
}
Could someone please advise on this issue?

They will never stay in the same line because of the 1 pixel border.
There are 2 ways you can make them stay in the same line.
The first (better) is to use box-sizing: border-box;
Doing so the element will be 50% width always, despite borders and padding.
The second is to use the calc function for the width.
width: calc(50% - 2px);
By using this function you will remove 2px of the borders from the total width.
Remember to update this if you add any padding or increase the border width! (Anyway i suggest you the first option)
EDIT
I forgot that there's an issue with display: inline-block; basically a whitespace will be added between the two elements, covering more than 100%. To prevent this you can just add float: left or add a negative margin to the right, like margin-right: -4px;

First set box-sizing property to border-box, then use float, or remove whitespace between divs:
.baners{
width: 50%;
height: 65vw;
border:solid 1px #D8D8D8;
display:inline-block;
background:#FFF;
box-sizing: border-box;
float: left;
}
<div class="someClass" >
<div class="baners" >
</div><div class="baners" >
</div><div class="baners" >
</div><div class="baners">
</div>
</div>

Instead of using display:inline-block, float them left and set the box-sizing to border-box.
.baners {
width: 50%;
height: 65vw;
border:solid 1px #D8D8D8;
float:left;
background:#eee;
box-sizing:border-box;
}
<div class="someClass">
<div class="baners"></div>
<div class="baners"></div>
<div class="baners"></div>
<div class="baners"></div>
</div>

I would use 'box-shadow' to accomplish this.
The problem is that 50% +1px is more than half of the screen and since your container isn't 100%+4px, the second box pushes to the next line, so what we want to do is essentially draw the border inside the 50%.
.baners{
box-shadow:0px 0px 0px 1px black inset;
width: 50%;
height: 65vw;
display:inline-block;
background:red;
float:left;
}
fiddle here: http://jsfiddle.net/dp8yktcg/7/

Related

float in the center in CSS?

How to center several boxes in CSS? Suppose I have a div "navigation". Now, the navigation margin is auto, that is, it is in the center, how would I add lists(display:inline) inside navigation that will expand navigation on both sides. I haven't set the width property so the width will be dynamically expanding. Its like float :center.
Set margin:auto and width:940px and you are done. You can change width as per your need. But giving some width is compulsory.
Check this fiddle and tell me if it helped you.
http://jsfiddle.net/JNMZ3/4/
You can change padding of the li elements for more space. And then adjust width of the navigation div to keep it in center.
try this
your css replace with
http://jsfiddle.net/JNMZ3/3/
.navigation li{
margin: 3px 6px 3px 6px;
display: inline;
border: 2px solid black;
padding: 2px;
zoom:1;
width:auto;
}
Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 100px;
background:red;
float:left;
}
.rightsidebar {
background:blue;
height: 608px;
width: 100px;
float:right;
}
.content {
width: auto;
margin:0 auto;
background:yellow;
height:608px;
}

How to reduce an element's width by a pixel when it is defined in percent

I have four elements each of whom's width is set to 25%. They fill the width of the page perfectly.
I want to put a 1px gap between each one. If I do this (margin-right: 1px; for example), the last element overflows onto the next line. How can I reduce the width of each element by 1px without calculating the width in pixels in the first place?
I have just found a solution myself, with the help of #Lubnah in the comments.
.tab-list li {
margin-right: -1px;
border-left: 1px solid #fff;
}
.tab-list li:first-of-type {
border-left: none;
margin-right: 0px;
}
You can use CSS calc but its browser support is sketchy:
width: calc( 25% - 1px );
width: -moz-calc( 25% - 1px );
width: -webkit-calc( 25% - 1px );
Width is calculated inside the container. Any padding or margins you set will be added to the width.
Set your width to 23% and your margin to 1%
Left margin (1) plus width (23) plus right margin (1) = 25. That, placed four times on the page will add up to 100.
You could cheat slightly by having an inner div inside each element with width auto and margin-right:1px
See this fiddle: http://jsfiddle.net/7R6zZ/
<div class="outer">
<div class="inner">1</div>
</div>
<div class="outer">
<div class="inner">2</div>
</div>
<div class="outer">
<div class="inner">3</div>
</div>
<div class="outer">
<div class="inner">4</div>
</div>
.outer {
width:25%;
float:left;
}
.outer .inner {
width:auto;
margin-right:1px;
background:#999;
min-height:300px;
}
Use box-sizing: border-box; and borders.
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
div {
width: 25%;
border-right: 1px solid right;
}
use box sizing as box-sizing:border-box
and use 1px right border with same color as background
.box{
width:25%;
box-sizing:border-box;
border-right: 1px solid "same color as your background"
}

Floated div - fill available width

I have to divs floated, one is on the left, the other on the right. What i want to do (without js) is that the right div fills the available space (width: 100%). The problem is, that the left div has an dynamic width, else I could simply use margin-left.
I also tried display: table-cell; but that won't allow me to use margin, only border-spacing.
Any suggestion?
You can probably do it like this, works in IE8 and better, in FF, in Safari. You could use padding instead of margin, as in this example:
<style>
.c_0 {
display: table;
width: 100%;
border: 4px solid orange;
}
.c_1 {
display: table-cell;
width: 20%;
border: 1px solid red;
padding-right: 20px;
}
.c_2 {
display: table-cell;
border: 1px solid blue;
}
</style>
<div class="c_0">
<div class="c_1">
has a width and padding instead of margin
</div>
<div class="c_2">
has the rest
</div>
</div>
EDIT
This only works with "%" on the first row. I saw it too late, that you want pixels.

Why do a div and a table behave differently when given width=100% here?

Here's my code, reduced to the relevant parts:
<html><head><title></title>
<style type="text/css">
body { background-color: #fff; }
#titlebar{ border: solid 1px black; margin:10px; }
#bodyWrapper{ float: left; width: 100%; }
#bodyColumn{ margin-left: 230px; height:500px; }
#menuColumn{
float: left;
width: 230px;
border: solid 1px black;
margin-left: -100%;
height:500px;
}
.bigContent{ width: 100%; margin:10px; }
.section{
border: 1px solid black;
padding:10px;
overflow: auto;
}
</style></head><body>
<div id="titlebar">Title</div>
<div id="bodyWrapper"><div id="bodyColumn">
<table class="section bigContent"><tr><td>FIRST</td></table></table>
<div class="section bigContent">SECOND</div>
</div></div>
<div id="menuColumn">MENU</div>
</body></html>
My problem:
The <div> containing "SECOND" is wider than the <table> containing "FIRST" although both are siblings and have width=100% via the same CSS class
The <div> is also wider than the screen, causing scrollbars to appear
Why is this and what can I do to fix it?
Note: I am seeing the same problems in both Firefox 3.6 and IE 8
This is because of the padding. In CSS, the width property applies to the content box of elements, without the padding.
See http://www.w3.org/TR/CSS21/box.html : The width property applies to the Content block in the following schema:
So the outer element's width is 100% of the parent's width, plus 10px of left padding and 10px of right padding.
Given that this element is a block element, it should not be necessary to specify its width to 100%.
So the solutions are:
To not set a width
To take the padding into account when setting the width (here this would require to set the padding in %, e.g. 2% of padding and a width of 96% (100-2*2)

How to control border height?

I have two div, one on the left and the other is on the right. Now I want to divide this two div with a border between them. But the border with full height looks bad.
I want to control the height of the border. How could I do this?
A border will always be at the full length of the containing box (the height of the element plus its padding), it can't be controlled except for adjusting the height of the element to which it applies. If all you need is a vertical divider, you could use:
<div id="left">
content
</div>
<span class="divider"></span>
<div id="right">
content
</div>
With css:
span {
display: inline-block;
width: 0;
height: 1em;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
Demo at JS Fiddle, adjust the height of the span.container to adjust the border 'height'.
Or, to use pseudo-elements (::before or ::after), given the following HTML:
<div id="left">content</div>
<div id="right">content</div>
The following CSS adds a pseudo-element before any div element that's the adjacent sibling of another div element:
div {
display: inline-block;
position: relative;
}
div + div {
padding-left: 0.3em;
}
div + div::before {
content: '';
border-left: 2px solid #000;
position: absolute;
height: 50%;
left: 0;
top: 25%;
}
JS Fiddle demo.
Only using line-height
line-height: 10px;
I want to control the height of the border. How could I do this?
You can't. CSS borders will always span across the full height / width of the element.
One workaround idea would be to use absolute positioning (which can accept percent values) to place the border-carrying element inside one of the two divs. For that, you would have to make the element position: relative.
not bad .. but try this one ... (should works for all but ist just -webkit included)
<br>
<input type="text" style="
background: transparent;
border-bottom: 1px solid #B5D5FF;
border-left: 1px solid;
border-right: 1px solid;
border-left-color: #B5D5FF;
border-image: -webkit-linear-gradient(top, #fff 50%, #B5D5FF 0%) 1 repeat;
">
//Feel free to edit and add all other browser..
I was just looking for this... By using David's answer, I used a span and gave it some padding (height won't work + top margin issue)... Works like a charm;
See fiddle
<ul>
<li>Home</li><span class="divider"></span>
<li>About Us</li><span class="divider"></span>
<li>Events</li><span class="divider"></span>
<li>Forum</li><span class="divider"></span>
<li>Contact</li>
</ul>
.divider {
border-left: 1px solid #8e1537;
padding: 29px 0 24px 0;
}
You could create an image of whatever height you wish, and then position that with the CSS background(-position) property like:
#somid { background: url(path/to/img.png) no-repeat center top;
Instead of center topyou can also use pixel or % like 50% 100px.
http://www.w3.org/TR/CSS2/colors.html#propdef-background-position