I have two divs like this:
<section id="main">
<div id="left">
<asp:ContentPlaceHolder ID="left" runat="server" />
</div>
<div id="right">
<asp:ContentPlaceHolder ID="right" runat="server" />
</div>
</section>
And here is my css:
#left {
float: left;
margin-right: 17px;
}
#right {
float: right;
}
I want the space between the divs to be 40px. I tried adding padding, margin and width in my css, but I think it didn't set the padding to correct 40px. How to do it?
For folks searching for solution to set spacing between N divs, here is another approach using pseudo selectors:
div:not(:last-child) {
margin-right: 40px;
}
You can also combine child pseudo selectors:
div:not(:first-child):not(:last-child) {
margin-left: 20px;
margin-right: 20px;
}
Float them both the same way and add the margin of 40px. If you have 2 elements floating opposite ways you will have much less control and the containing element will determine how far apart they are.
#left{
float: left;
margin-right: 40px;
}
#right{
float: left;
}
Another solution for spacing between N divs can be:
div + div {
margin-left: 40px;
}
We are leveraging + css selector. It only selects the <div> elements that are placed immediately after <div> elements.
Notice: we are setting margin-left not margin-right here.
You need a gutter between two div gutter can be made as following
margin(gutter) = width - gutter size
E.g margin = calc(70% - 2em)
body{
font-size: 10px;
}
#main div{
float: left;
background-color:#ffffff;
width: calc(50% - 1.5em);
margin-left: 1.5em;
}
<body bgcolor="gray">
<section id="main">
<div id="left">
Something here
</div>
<div id="right">
Someone there
</div>
</section>
</body>
Related
hi I am having a problem centering my content div between my left and right sidebars. My left and ride side bars are floating and there isn't a float:center. The only way I can center it is using padding but that makes my center div go underneath my sidebars.
make a wrapper around all 3 divs and then position the centered div with a margin
<div id="wrap">
<div id="left" style="float: left"></div>
<div id="content" stlye="float: left: margin: 0 auto;"></div>
<div id="right" stlye="float: left"></div>
</div>
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: 60px;
background:red;
float:left; }
.rightsidebar
{
background:blue;
height: 608px;
width: 163px;
float:right;
}
.content
{
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}
Floatting basis would be:
<div id="left"> Left</div>
<div id="right" >right</div>
<div id="middle">in between, but after</div>
#left {float:left;width:XX;}
#right {float:right;width:XX;}
#middle {overflow:hidden; margin:0 XX;}
You can as well look for other methods to keep div in the flow [left][middle][right], like using : display: table/table-cell | inline-block | flex.
<div style="widht: 960px;">
<div class="content left">left</div>
<div class="content center">center</div>
<div class="content right">right</div>
<div style="clear:both"></div>
</div>
here the css
.content {
float: left;
}
.left , .right{
width : 180px;
margin : 0 10px;
}
.center{
widht: 540px;
margin : 0 10px;
}
I'm trying to align the layout so the images align in a row.
Here's a image of what it is currently doing
HTML
<div class="p-alignleft"></div>
<div class="p-alignright"></div>
CSS
.p-alignleft {
float: left;
margin-right:40px;
width:450px;
font-size: 1.2em;
line-height: 1.4em;
}
.p-alignright {
float: right;
width:450px;
font-size: 1.2em;
line-height: 1.4em;
}
By looking at the captured screen, I think you should enclose each person's part inside a div, and give them classes .p-alignleft or .p-alignright. After every two of them, make an empty <div class="clear"></div> with style .clear {clear:both}, so the next two persons will align at the same vertical level
HTML:
<div class="p-alignleft">Person A</div>
<div class="p-alignright">Person B</div>
<div class="clear"></div>
<div class="p-alignleft">Person C</div>
<div class="p-alignright">Person D</div>
CSS:
.p-alignleft {float:left}
.p-alignright {float:right}
.clear {clear:both}
If I understand rightly, you have a couple of options here. Instead of floating, my preference is to set each div to display: inline-block; That will make the divs line up next to each other, even if one is taller than the other:
div {
display: inline-block;
vertical-align: top;
}
A working example: http://cdpn.io/ojDEl
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.wrap {width: 800px;}
.wrap div {width: 48%; display: inline-block; vertical-align: top; background: #e7e7e7; margin-bottom: 20px;}
/* temp demo styles */
.wrap div {height: 200px;}
.wrap div.test {height: 300px;}
</style>
</head>
<body>
<div class="wrap">
<div>Person A</div>
<div class="test">Person B</div>
<div>Person C</div>
<div>Person D</div>
</div>
</body>
</html>
Use a container div as a row element <div class="row clearfix"><div class="media">...</div></div>
Float both elements to the left, and set clear: left on the odd ones.
Use a javascript solution to set the height to be the same. then you can leave the clear left, right, or clear all to one side.
something like this, you probably need to tweak it, it's more like pseudo code.:
var maxHeight = 0;
var items = $('.media');
// get the max height of the items
items.each(function() {
var height = parseInt($(this).outerHeight().replace('px', ''), 10);
if (maxHeight < height) {
height = maxHeight;
}
});
// assign the height to all the items
items.height(height + 'px');
I need the center div div#b to fill out the gab between div#a and div#c.
<div id="a">
<span>Div1</span>
</div>
<div id="b">
<span>Div2</span>
</div>
<div id="c">
<span>Div3</span>
</div>
I tried to do this by placing width: 100% on div#b but without luck.
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
float:left;
width:100%; ?? <!-- Doesn't work!!! -->
}
div#c
{
float:right;
width:50px;
}
How can I get div#b to expand from div#a to div#c?
There can be no line breaks.
CSS3
You can implement this dynamic behavior using the CSS3 Flexible Box Layout Module:
<style type="text/css">
div.Container
{
width: 100%;
display: box;
display: -moz-box;
display: -ms-box;
display: -webkit-box;
}
div.B
{
background: magenta;
box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-webkit-box-flex: 1;
}
</style>
<div class="Container">
<div style="width: 50px; background: cyan;">
A
</div>
<div class="B">
B
</div>
<div style="width: 50px; background: yellow;">
C
</div>
</div>
A new version of FireFox, a new version of Google Chrome, Internet Explorer 10 and a new version of Safari supports CSS3 flexible box layout. Internet Explorer 9 and Opera is lacking support at the moment.
I also want to mention this new way to do it in FireFox:
<div style="float: left; width: 50px; background: cyan;">
A
</div>
<div style="float: left; width: -moz-calc(100% - 100px); background: magenta;">
B
</div>
<div style="float: left; width: 50px; background: yellow;">
C
</div>
FireFox is the only browser that support the calc function at the moment.
CSS2
Here is the old way to do it:
<div style="padding-left: 100px;">
<div style="float: left; width: 50px; margin-left: -100px; background: cyan;">
A
</div>
<div style="float: left; width: 100%; margin-left: -50px; background: magenta;">
B
</div>
<div style="float: left; width: 50px; background: yellow;">
C
</div>
</div>
A width of 100% inside the container div is the width of the container minus the 100px left padding. Then there is room for the left and right 50px div elements. Then you have to position them using some negative margin and floating.
Feature detection
Use feature detection with Modernizr. Then you can use CSS2 for browsers that lack support for CSS3 flexbox.
If you do .NET development you can download Modernizr with NuGet.
I've hit similar problems myself. The problem here is "width: 100%" will basically inherit the width of the parent container.
The other problem is the float. When you ask div#b to float to the left alongside div#a, you can't use the fancy margin trick to force div#b to stay out of the way of div#a. (In other words, margin can be used to keep div#b from entering and interfering with a certain amount of space on any of its sides.) However, with float, the margin is now not pushing div#b away from the edge of the page, but away from the edge of div#a.
OK, so the solution looks like this. Remove the float on div#b, and then apply left and right margins so div#b doesn't interfere with either side columns. Let div#b determine its own size (i.e. don't give it a "width"), so it will fit between the two floats. Lastly, shift div#b so that the floats occur before div#b is put in place, so that div#b is put between the floats.
Here's the new code:
<style type="text/css">
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
margin-left: 55px;
margin-right: 55px;
}
div#c
{
float:right;
width:50px;
}
</style>
<div id="a">
<span>Div1</span>
</div>
<div id="c">
<span>Div3</span>
</div>
<div id="b">
<span>Div2</span>
</div>
Determining margins is tricky. Borders aren't counted in the width calculation of an element, so a 50px-wide div with a 1px border is actually 52px-wide.
I have a feeling you won't like this answer, but the easiest way to do it is to remove float: left and any width from div#b, and then switch up the order of your divs, so both the sidebars are before your main content area. Here's the code:
HTML:
<div id="a">
<span>Div1</span>
</div>
<div id="c">
<span>Div3</span>
</div>
<div id="b">
<span>Div2</span>
</div>
CSS:
div
{
border:1px solid red;
}
div#a
{
float:left;
width:50px;
}
div#b
{
overflow: hidden;
/*margin: 0 60px;*/
}
div#c
{
float:right;
width:50px;
}
Note that I've applied overflow: hidden to the middle div - this will force it into columns (in most browsers). You could use the given margins instead, if you're not comfortable with a "magic" solution (there is a reasonable explanation for it, but I can never remember it off the top of my head).
It should be very simple, but I am, so it's not ...
The first thing on the page, right after <body>, I want a sort of banner, containing some text which is left aligned, and an image which is right aligned. It should occupy te full width of the page.
Can you do that without knowing the width og the image?
Yes, put image in one div, and text in another, define "float: right" property for the div with the image, and "float: left" for div with the text in CSS
<div class="div1"><img src=...></div>
<div class="div2">text</div>
<style type="text/css">
.div1 {
float: right;
}
.div2 {
float: left;
}
</style>
<div id="banner">
<div style="float: left; width: 50%;">
left - just put your text here
</div>
<div style="float: right; width: 50%;">
right - just put your image here
</div>
</div>
You may also want to use a clearfix (google it) technique to ensure the banner div always has height no matter how big the image is.
Here's a fiddle : http://jsfiddle.net/KaHjd/1/
I've assumed that you want the image right aligned as well.
#header {
overflow:auto;
}
#branding {
float: left;
padding: 10px;
background: #00AA00;
}
#logo {
float:right;
padding: 10px;
background: #aa0000;
overflow:auto;
}
#logo img {
float:right;
}
<div id='header'>
<div id='branding'>
some text
</div>
<div id='logo'>
<img src='http://placekitten.com/200/100'>
</div>
</div>
Of course we can. But your image must be small enough in order for your text not to overflow the banner.
HTML
<div class="banner">
<span>Text goes here</span>
<img src="" alt="" />
</div>
CSS
.banner { overflow: hidden; width: 100%; }
.banner span { float: left; }
.banner img { float: right; }
I've got a weird CSS float problem in IE6 and IE7.
My HTML is:
<fieldset style="float:left">
<legend>Summary</legend>
<div class="display-label">Recruitment type</div>
<div class="display-field">Permanent Labour</div>
<div class="display-label"># resources</div>
<div class="display-field">2</div>
<div class="display-label">Request Created</div>
<div class="display-field">4/28/2011</div>
<div class="display-label">Requested by</div>
<div class="display-field">1066594</div>
<div class="display-label">Status</div>
<div class="display-field">Active</div>
</fieldset>
and my CSS is:
.display-label, .display-field
{
padding: 0.35em 0.25em;
float: left;
}
.display-label
{
width: 13em;
text-align: right;
clear : left;
font-weight: bold;
}
.display-field
{
margin-left: 1em;
}
IE 8+ and Firefox display this correctly like this:
IE6 and 7 , though, display the following:
How can I fix this?
you do need to contain the floats, i.e. use some form of clearance, but you don't need to float everything
first remove the inline style, unfloat the fieldset
<fieldset style="float:left">
if you want fieldset to "shrink-wrap" (floating an element without a width should do this) you'd be best to set a width or max-width on it, IE hasn't quite got the shrink-wrap behaviour right the element to be "shrunk" contains elements with hasLayout which this 'fieldset` does because of the floated div(s) inside
then this CSS should work without hacking the HTML
.display-label,
.display-field {
padding: 0.35em 0.25em;
}
.display-label {
float: left;
clear: left;
width: 13em;
text-align: right;
background: #eee;
font-weight: bold;
}
.display-field {
overflow: hidden;
}
EDIT: You need to specify a a clear after the label and the field are created. You should technically be wrapping both the label and field with a container element to prevent misalignment, but this should accomplish what you're looking for.
<fieldset style="float:left">
<legend>Summary</legend>
<div class="display-label">Recruitment type</div>
<div class="display-field">Permanent Labour</div>
<div style="clear:both;"></div>
<div class="display-label"># resources</div>
<div class="display-field">2</div>
<div style="clear:both;"></div>
<div class="display-label">Request Created</div>
<div class="display-field">4/28/2011</div>
<div style="clear:both;"></div>
...
</fieldset>