I'm trying to float some content left, with a table to the left-hand side.
Here's a JSFiddle: http://jsfiddle.net/TxLyr/1/
I'd like the text content that's currently below the table to be to the right of the table.
What am I doing wrong?
Full CSS for reference:
.container {
width: 100%;
border: 1px solid red;
}
.table-container {
width: 60%;
float: left;
overflow-x: scroll;
overflow-y: none;
}
table {
width: 100%;
border: 1px solid #ccc;
}
#aside {
float: left;
border: 1px solid blue;
}
You've to set a proper width value for the #aside element.
Fiddle
Since you have a border of 1px, you cannot set the width to 40%;. Set it to 39% or remove the border.
You have to set the width of course. If you don't the element takes it's auto width.
#aside {
float: left;
border: 1px solid blue;
width:39%;
}
change it:
#aside {
float: left;
border: 1px solid blue;
width:39%; /* this line added */
}
http://jsfiddle.net/TxLyr/9/
and you can use 40% but if you have border or padding you must use box-sizing and it's need css3.
and box-sizing Compatibility here:
http://caniuse.com/#search=boxsizing
You have to give a width 38% on id #aside. Here using 38% width because you are using a 1px border. Also to clear float property you have to use overflow:hidden property.
Related
Imagine the following CSS:
#foo {
border: 1px solid black;
border-right: 1px solid blue;
}
In this case, at least under Chrome, the top and bottom right corner pixels of the element are blue, not black. Is it possible to make them black?
You can't do it with the normal CSS border options, but if you want to, you can still have a pure CSS solution:
Basically, what you are going to do is create two pseudo elements with CSS, and cover the corners:
#foo {
border: 100px solid black;
border-right: 100px solid blue;
height:300px;
position:relative;
}
#foo:after, #foo:before{
content:'';
background:black;
width:100px;
height:100px;
display:block;
position:absolute;
}
#foo:after{
bottom:-100px;
right:-100px;
}
#foo:before{
top:-100px;
right:-100px;
}
It might be a little messy, but it works. Set the :after and :before elements width height and position to the width of the border.
And that gives this effect:
JSFiddle Demo
I hope my crappy photoshop skills explain borders to you.
If you look in the 4 corners of the square you can see little lines, thats where one border starts and the next one begins.
This will always be in issue :P
You could either make it a background image (crappy way)
or you can use other divs to make the borders (crappy as well)
The first solution would be using a pseudo-element, which you will position absolutely to cover the right border. In order to ensure that it covers the border entirely, you will have to offset its top, bottom and right positions by the negative value of the border width. In this case I have used a width of 5px to better illustrate the example:
#foo {
background-color: #eee;
border: 5px solid grey;
width: 100px;
height: 100px;
position: relative;
}
#foo::before {
content: '';
position: absolute;
top: -5px;
bottom: -5px;
right: -5px; /* move by border width */
background-color: blue;
width: 5px;
}
<div id="foo"></div>
Alternatively, you can use CSS box shadow:
#foo {
background-color: #eee;
box-shadow: inset 0 0 0 5px grey;
width: 100px;
height: 100px;
position: relative;
}
#foo::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 5px;
background-color: blue;
}
<div id="foo"></div>
As others have pointed out, your problem is how borders are drawn in CSS.
<div id="foo">Problem</div>
#foo {
border: 30px solid black;
border-right: 30px solid blue;
}
The simplest way to work around this is to use a pseudo element. Since this workaround is entirely dependent on the value of the border-width, I’ll show an example using an SCSS variable to help make it clear where that width value is coming in.
Note: You don’t need SCSS to solve this problem, using a variable just helps readability/maintainability.
HTML:
<div id="foo"></div>
SCSS:
/* Set SCSS variable */
$border-width: 30px;
#foo {
border: $border-width solid black;
position: relative; /* anchor the absolute positioned ::after element */
}
#foo:after {
content: '';
background: blue;
width: $border-width;
height: 100%;
position: absolute;
right: -$border-width;
}
Demo: http://jsbin.com/cimaxe/6
Hopefully it’s clear that everywhere you see $border-width you can replace it with a value like 30px.
Related to this question.
Here's a fiddle: http://jsfiddle.net/DRbRS/
Notice how the red-outlined list div does not align at the bottom of the green container div.
The problem is that there is no way of knowing ahead of time what the resulting height of the list ought to be, even if the height of the header is known.
Is there any way to deal with this without resorting to javascript?
What we need is a style like height: fill;
Using position: absolute and setting top, left, right, and bottom: http://jsfiddle.net/QARC9/
This article describes why it works.
http://www.alistapart.com/articles/conflictingabsolutepositions/
Replace your CSS with this
#container {
left: 50px;
width: 200px;
position: fixed;
height: 90%;
border: 2px dashed green;
}
#header {
height: 30px;
line-height: 30px;
text-align: center;
border: 2px dashed blue;
margin-left:-2px;
margin-top:-2px;
width:200px
}
#list {
border: 2px dashed red;
overflow: auto;
height: 91%;
width:200px;
margin-left:-2px;
margin-top:-2px;
}
or see the demo here http://jsfiddle.net/enve/DRbRS/3/
I'm trying to create a div with 3 divs inside.
.outter
{
right: 100px;
border: 10px solid white;
}
.main
{
overflow: hidden;
width: 100%;
height: 150px;
}
.left
{
float: left;
width: 40%;
height: 100%;
background-color: green;
border-right: 5px solid white;
}
.center
{
float: left;
width: 40%;
height: 100%;
background-color: red;
border-left: 5px solid white;
border-right: 5px solid white;
}
.right
{
float: right;
width: 20%;
height: 100%;
background-color: orange;
border-left: 5px solid white;
}
<div class="outter">
<div class="main">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</div>
</div>
This is what I got so far.
-The parent div should have a right distance fixed of 100px, a border of 10px white and the widht is the 100% - 100px;
-The inside divs have 40% + 40% + 20% with a distance between them of 10 px (thats why I putted the border-left 5 and border-right 5.
I'm having problems setting this. What I need is to have fixed sized borders and margin to the right. the other divs should be dynamic to fullfill the 100% width.
Can anyone help me?
Regards,
You can use box-sizing for this. write like this:
.main,
.main >*{
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
Check this:
http://jsfiddle.net/ubtdT/
You have a problem with the box-model. An element cannot have 100% width and then a 10px border, because the border is added outside the 100% width, which is causing your problem.
Depending on what browsers you intend to support, you can make use of CSS3's box-sizing property. By setting box-sizing: border-box;, you can force the browser to instead render the box with the specified width and height, and add the border and padding inside the box. Which should solve your problem. Note the limited support in older browsers.
If you want to go even more experimental you can use the new CSS3 calc() to actually calculate a dynamic width:
/* Firefox */
width: -moz-calc(75% - 100px);
/* WebKit */
width: -webkit-calc(75% - 100px);
/* Opera */
width: -o-calc(75% - 100px);
/* Standard */
width: calc(75% - 100px);
I'm trying to float a div over another one but in the center (width).
EDIT: I want the container div to be over the top div and centered.
Current CSS:
body {
background-color: #FFF;
margin: auto;
}
#top {
background-color: #F2F2F2;
border-bottom: 1px solid #CCC;
height: 150px;
position: relative;
}
#container {
background-color: #FFF;
border: 1px solid #CCC;
width: 920px;
height:300px;
position: absolute;
top:0;
right:auto;
}
This is what i get:
set left:50%
and margin-left:-460px (half the width of the div)
Try this. It's untested but you basically need to set the container div to relative and then the div inside that to absolute.
body {
background-color: #FFF;
margin: auto;
}
#top {
background-color: #F2F2F2;
border-bottom: 1px solid #CCC;
top: 50%;
left: 50%;
position: absolute;
}
#container {
background-color: #FFF;
border: 1px solid #CCC;
width: 920px;
height:300px;
position: relative;
right:auto;
}
I would suggest setting #top's position attribute to absolute and using a little javascript to set the left attribute to #container's left + half of #container's width - half of #top's width.
i.e, after including jQuery (untested):
$(document).ready(function(){
var topLeft = $("#container").css("left") + ($("#container").css("width")/2) - ($("#top").css("width")/2);
$("#top").css("left", topLeft);
});
In the case that left is zero, like the example you gave, that $("#container").css("left") term is unnecessary.
EDIT: You'll also have to be sure to set the z-index attributes of the two divs appropriately.
I have a table of contents in my page (see here) with these CSS styles:
div.toc {
height:38em;
position:fixed;
right:0;
top:5em;
width:21em;
z-index:1;
}
How do I have to change these settings to make sure the DIV isn't partially hidden behind the body/window scroll bar?
(Tested with Firefox 3.6 and Opera 10.10).
Actually, your div.toc is properly positioned. The problem is with your <iframe>.
Remember your box model... width and height is calculated independently from the margin and padding...
So, by having width: 100%; on your iframe.toc plus a margin-left: 0.5em, you are basically telling the browser the following:
Use the full width of the parent element and offset it 0.5em to the left.
Total effective width: 100% + 0.5em
What you really want to say is the following:
Substract 0.5em from the full width of the parent element to use as padding on the left and use this as width.
Total effective width: 100% - 0.5em (desired)
The solution is therefore simple... Remove the margin-left from iframe.toc and put a padding-left: 0.5em on div.toc.
div.toc {
background-color: #f0f0f0;
position: fixed;
top: 5em;
right: 0;
width: 21em;
height: 38em;
padding-left: .5em;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
z-index: 1;
}
iframe.toc {
background-color: #f0f0f0;
border: 0;
width: 100%;
height: 30em;
border-bottom: 1px solid #ccc;
}
You can make you table of contents position 1 em from the right like this: right: 1em;
I just tried it for you and right: 1em; looks good.