Say I have two divs A and B, which are currently aligned side by side. How can I get A to be separated from B by 50px, while still letting A to take up 70% of the remaining space and B the remaining 30%?
EDIT: Accepted the answer a little early before I actually tried. Whoops.
JSFiddles:
A Tale of Two Divs
Now separated, but now with the second one on a second line?
Try this out if it solves your problem.
<html>
<head>
<style type="text/css">
#Content
{
border: 3px solid blue;
position: relative;
height: 300px;
}
#divA
{
border: 3px solid red;
position: absolute;
margin-right: 25px;
left: 5px;
top: 5px;
bottom: 5px;
right: 70%;
}
#divB
{
border: 3px solid green;
position: absolute;
right: 5px;
top: 5px;
bottom: 5px;
left: 30%;
margin-left: 25px;
}
</style>
</head>
<body>
<div id="Content">
<div id="divA">
</div>
<div id="divB">
</div>
</div>
</body>
</html>
just set the margin-left or padding-left of div B
I believe your selected answer will not work:
http://jsfiddle.net/cNsXh/
edit:
Sorry, the above example was not correct at first. Now it is.
/edit
As you can see, div #b will move under div #a because margin-left (or padding-left) will be added to the 30%. And because we're mixing percentage with pixel values here, we will not be able to define values that will guarantee to always add up to exactly 100%.
You'll need to use a wrapper for div #b which will have 30% width, and not define a width for div #b, but define margin-left. Because a div is a block element it will automatically fill the remaining space inside the wrapper div:
http://jsfiddle.net/k7LRz/
This way you will circumvent the CSS < 3 box-model features which oddly enough was defined such that defining a dimension (width / height) will NOT subtract margins and/or paddings and/or border-width.
I believe CSS 3's box-model will provide more flexible options here. But, admittedly, I'm not sure yet about cross-browser support for these new features.
#wrongusername; i know you accept that answer but you can check this solution as well in this you have no need to give extra mark-up & if you give padding to your div it's not affect the structure.
CHECK THIS EXAMPLE: http://jsfiddle.net/sandeep/k7LRz/3/
http://jsfiddle.net/efortis/HJDWM/
#divA{
width: 69%;
}
#divB{
width: 29%;
margin-left: 2%;
}
Related
please see link below
as you can see there's a text on header (header is an image)
the text is:
mail#yahoo.com (this text is a part of image)
I convert that part of header image to link with below code
<div id="hw"><div id="header"><img src="test.jpg" /></div></div>
and this is #link
#ResponsiveLink {
width: 267px;
height:29px;
display:block;
position:absolute;
top:100px;
margin-left:413px;
}
how can we make that link be responsive in other devices? for example when browser is narrow position of the a tag with #ResponsiveLink id changes but i want it be fixed over my text.
The best way I know, is not to put a big part of your screen as an image. On the other hand you probably don't want to cut the image into several separate images. So, I suggest using CSS Sprit.
After separating the image, you can put the parts beside each other using float, clear, and percentage widths, or use a framework like bootstrap.
If you still want to use the image as a whole header, in a single HTML tag which don't recommend at all, using percentage top for your #ResponsiveLink would work. You should just add width: 100% to all its parents: header, hw, and wrapper.
Following the comments:
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 0;
left: 58%;
margin-left: 0;
margin-top: 7%;
padding-bottom: 3%;
position: absolute;
top: 0;
width: 25%;
}
This will fix the problem because of the difference between percentages of position and margin, top percentage is calculated using first absolute parent's height but margin and padding percentages are calculated using parent's width. There's still a problem caused by the max width which you can fix adding a wrapper inside your #head with a width of 100% and no max width.
The other try of using floats and separated images have too many problems to write here, sorry.
What you're currently building isn't a sustainable solution and you should definitely see other replies on how to improve your site layout.
However, if you need a temporary solution, the following CSS changes will work on your current page:
#header {
margin: 0 auto;
max-width: 980px;
position: relative;
}
#ResponsiveLink {
background: none repeat scroll 0 0 #FF0000;
display: block;
height: 30%;
left: 60%;
position: absolute;
right: 12%;
top: 37%;
}
I have 2 divs floated left in a container div. The second div has width: 20px. I need the first div to fill all the available space and remains inline. Set first div width to 100% doesn't work because the second div with fixed width goes down. How can i do?
The code is described here: http://jsfiddle.net/7EW5h/4/
Thanks
You can use calc CSS3 function and set a dynamic width to #inner1 div as follows:
width: calc(100% - 20px);
It will be compatible with Firefox 16 (or later) and Internet Explorer 9 (or later).
You can add vendor prefixes as shown:
width: -moz-calc(100% - 20px);
width: -webkit-calc(100% - 20px);
width: calc(100% - 20px);
To make it compatible with Chrome 19 (or later), Firefox 4 (or later), Internet Explorer 9 (or later) and Safari 6 (or later).
You can check compatible tables here: http://caniuse.com/#search=calc
Regarding to you example, I had to set border: 0 to #inner1 and #inner2 divs.
I have tested and worked out a solution in Chrome, IE9, Firefox and Opera:
Use containers for the two input elements.
Change the order of the elements so that the right one is first.
Do not float the element that is supposed to fill the remaining space, just set the display to block (which is the default for div elements).
Set the margin-right of the larger container to the total width of the right element. Here we also need to account for things like borders, margins and paddings of both elements.
HTML:
<div id="container">
<div id="inner2">
<input />
</div>
<div id="inner1">
<input />
</div>
</div>
CSS:
#inner2 {
float: right;
}
#inner2 input {
height: 20px;
width: 20px;
border: 1px solid #000;
}
#inner1 {
margin-right: 24px;
}
#inner1 input {
width: 100%;
height: 20px;
border: 1px solid #000;
}
Live example: http://jsfiddle.net/7EW5h/22/.
Also note that i have explicitly set borders on the two input elements.
I can not get it to work without changing the HTML or the order of the two elements without using absolute positioning.
Have you tried using position:absolute; to position the elements as you need?
See fiddle - JSFiddle Example
I think, without complicating things, you can do the following.
Remove the floats from the two inputs.
Absolutely position the second input as shown below.
add padding-right to the first input to avoid content overlap.
also, even if it is not shown in my code below, don't forget the presence of default border, margin and padding.
#container {
overflow: hidden;
background-color: red;
}
#inner1 {
width: 100%;
background-color: blue;
padding-right:45px;
}
#inner2 {
height: 20px;
width: 20px;
background-color: green;
position:absolute;
right:0;
top:0;
}
What would i put in the css to have one div ontop of another div (both squares are 10x10) and have another column with a div that is 10x20?
Let me rephrase that so its a little simpler, i want one big square that's 20x20. On the left half of that shape, it needs two 10x10 squares, one ontop of the other. On the right side, i need a div that is 10x20.
Please help need this for a class
You can use css's position property to absolutely position elements to set top and left coordinates. You'll also need to use the height and width properties to size the boxes.
Maybe something like this?
<div id="bigBox">
<div class="leftBox"></div>
<div class="leftBox"></div>
<div id="rightbox">
</div>
<style>
#bigBox { position: relative; width: 20px; height: 20px;}
.leftBox {position: absolute; left: 0; height: 10px; width: 10px; }
.rightBox {position: absolute; right: 0; width: 10px; height: 20px;}
</style>
How to horizontally center a floating element of a variable width?
Edit: I already have this working using a containing div for the floating element and specifying a width for the container (then use margin: 0 auto; for the container). I just wanted to know whether it can be done without using a containing element or at least without having to specify a width for the containing element.
Assuming the element which is floated and will be centered is a div with an id="content"
...
<body>
<div id="wrap">
<div id="content">
This will be centered
</div>
</div>
</body>
And apply the following CSS:
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
left: -50%;
}
Here is a good reference regarding that.
.center {
display: table;
margin: auto;
}
You can use fit-content value for width.
#wrap {
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin: auto;
}
Note: It works only in latest browsers.
This works better when the id = container (which is the outer div) and id = contained (which is the inner div). The problem with the highly recommended solution is that it results in some cases into an horizontal scrolling bar when the browser is trying to cater for the left: -50% attribute. There is a good reference for this solution
#container {
text-align: center;
}
#contained {
text-align: left;
display: inline-block;
}
Say you have a DIV you want centred horizontally:
<div id="foo">Lorem ipsum</div>
In the CSS you'd style it with this:
#foo
{
margin:0 auto;
width:30%;
}
Which states that you have a top and bottom margin of zero pixels, and on either left or right, automatically work out how much is needed to be even.
Doesn't really matter what you put in for the width, as long as it's there and isn't 100%. Otherwise you wouldn't be setting the centre on anything.
But if you float it, left or right, then the bets are off since that pulls it out of the normal flow of elements on the page and the auto margin setting won't work.
The popular answer here does work sometimes, but other times it creates horizontal scroll bars that are tough to deal with - especially when dealing with wide horizontal navigations and large pull down menus. Here is an even lighter-weight version that helps avoid those edge cases:
#wrap {
float: right;
position: relative;
left: -50%;
}
#content {
left: 50%;
position: relative;
}
Proof that it is working!
To more specifically answer your question, it is probably not possible to do without setting up some containing element, however it is very possible to do without specifying a width value. Hope that saves someone out there some headaches!
Can't you just use display: inline block and align to center?
Example.
for 50% element
width: 50%;
display: block;
float: right;
margin-right: 25%;
I've found a lot of similar questions, and tried out several solutions (including some of the so-called "holy grail" CSS layouts), but they don't quite do what I need.
I have a containing div (a CSS containing block) with id right. Inside it on the left side, I want a fixed-width div (a splitter bar, but it doesn't matter what it's being used for; id splitpane); on the right, filling the rest of the space, another div (id right-box below).
I've tried making the two inner divs display: inline-block (with vertical-align: top), setting the left one to width: 3px, but then there's no way to set the right to have width 100% - 3px. I've also tried using the float: left/margin-left: -100%/margin-left: 3px trick, but it has the same problem: the 100% plus the 3px overflows the parent containing block and causes a scroll bar to pop up. (Of course, it's not the scroll bar per se that's the problem; I could use overflow: hidden to remove it, but then content on the right would be truncated.)
Currently I'm using width: 99.5% for the right div, but that's a terrible hack (and is subject to overflow depending on screen width). It looks a bit like this:
<div id="right"><div id="splitpane"></div><div id="right-box">
...
</div></div>
With CSS as follows (float version, but the inline-block version is similar):
#right {
display: inline-block;
vertical-align: top;
height: 100%;
width: 85%; /* this is part of a larger div */
}
#right-box {
width: 99.5%; /* stupid hack; actually want 100% - 3px for splitter */
height: 100%;
}
#splitpane {
float: left;
width: 3px;
height: 100%;
background: white;
border-left: solid gray 1px;
border-right: solid gray 1px;
cursor: e-resize;
}
Is it even possible to do this? This is for an internal app., so solutions only need to work in Firefox 3 (if they are specific to FF3, though, preferably it's because the solution is standards-compliant but other browsers aren't, not because it's using Firefox-only code).
DIVs are the wrong element type for this since they don't "talk" to each other. You can achieve this easily with a table:
<table style="width:200px">
<tr>
<td id="splitpane" style="width: 3px">...</td>
<td id="rightBox" style="width: 100%">...</td>
<tr>
</table>
The 100% will make the rightBox as wide as possible but within the limits of the table.
This is possible. Because block level elements automatically expand to take up any remaining horizontal space, you can utilise a block level element next to an uncleared floated element with your desired width.
<style type="text/css">
div {
height: 100px;
}
#container {
width: 100%;
}
#left {
background: #FF0;
}
#splitpane {
position: relative;
float: right;
background: #000;
width: 3px;
}
</style>
<div id="container">
<div id="splitpane"></div>
<div id="left"></div>
</div>
See http://jsfiddle.net/georeith/W4YMD/1/
why you didn't use margin-left (since it was float layout) on right box?
so no need to create a splitter div...
#right{
width:200px; /*specify some width*/
}
#rightbox{
float:left;
margin-left: 3px; /*replace the splitter*/
/*margin: 0 3px; /*use this to give left & right splitter*/ */
}
yeah something like that, i hate empty div, it's not semantic and it's like putting a splitter on the "old" table way
If the div #right-box is only going to contain non-floated content it might be an idea to just put the content inside #right instead and let it wrap around the floated #splitpane.