How can I position two divs with auto width side by side? The left div should take priority. Below is my attempt:
<div id='div_1'></div>
<div id='div_2'></div>
#div_1
{
display:inline-block;
float:left;
position:relative;
width:auto;
}
#div_2
{
display:inline-block;
float:right;
position:relative;
width:auto;
}
EDIT: Adding the goal for clarity -
'The goal is to make the first div be able to autosize itself. The second div should occupy the rest of the space.'
I believe you're looking for something like flexbox, which is not supported real well yet, I don't think.
An alternative is to configure the two as display: table-cell with a wrapping element using display: table and a width: 100%. See this question for a similar case:
https://stackoverflow.com/a/12650502/451969
What it would give you is something along the lines of:
<div id='wrapper'>
<div id='div_1'></div>
<div id='div_2'></div>
</div>
#wrapper
{
display: table;
width: 100%;
}
#div_1
{
display: table-cell;
}
#div_2
{
display: table-cell;
}
http://jsfiddle.net/mDyjE/
Fluid layouts rely on % width value. This is what you should use. For exemple: 50% for both of them.
Moreover, position: relative seems to be unnecessary here.
I assume the goal is to get them to be the same size, side by side. To do this, set width to be about 45% rather than auto. You use 45% because if you use 50% IE will drop the right div below the left.
#div_1
{
display:inline-block;
float:left;
position:relative;
width:45%;
}
#div_2
{
display:inline-block;
float:right;
position:relative;
width:45%;
}
Related
Putting a simple barchart together however It is overflowing on certain values, the goal was to make it responsive so I am using % instead of fixed values.
If 100% for container width it works, however I need to have three of these side by side so container is 33%
div.label {
background:blue;
width:20%;
}
div.bar{
width:80%;
}
div.bar_value{
background:green;
width:77%;
}
.row_container{
background:black;
width:33%;
}
.row_container div {
display: inline-block;
}
Here is a snippet of the issues that I am having
http://jsfiddle.net/7h64p0h6/1/
You need to avoid space between divs problem with display inline-block elements.
.row_container{
background:black;
width:50%;
font-size:0;
}
.row_container div {
display: inline-block;
font-size:16px;
vertical-align: top;
}
See it working: http://jsfiddle.net/7h64p0h6/3/
I know it's a super-basic question, but I'm not able to find a solution. I have 2 div and I would like to display them as blocks (one below the other) without having 100% width. Here's my code.
HTML
<div id="container">
<div class="test">one</div>
<div class="test">two</div>
</div>
CSS
.test {
display:inline-block;
clear: both;
border:1px solid;
}
#container {
clear:both;
text-align:center;
}
Unfortunately this answer doesn't fit to me, since I need to center blocks horizontally (so float cannot be applied in my case). Here's the fiddle. Thanks in advance.
to center them on top of each other without taking 100% width and still use margin:auto; use : display:table;
.test {
display:table;
margin:auto;
border:solid;/* to see it */
}
You can specify the width of the divs, change display to block, and use margin: 0 auto to center them.
JSFiddle
You can also center the div by adding 50% left offset, and then negative margin in amount to half width of the div. I do not know how much is this applicable to your case, but here is an example:
.test {
position: relative;
border:1px solid;
width: 300px;
left: 50%;
margin-left: -150px;
}
You can see it in action here: http://jsfiddle.net/b8LuQ/7/
display:inline-block; is not allow the second line. Therefore I removed it and define width for both div test one two you can resize it and margin:auto is align center the both div in container here is an example
I want the child divs to be always centered within their container, even on resize, and without changing their size.
Problem Example : http://jsfiddle.net/bQMj7/
HTML
<div id='foo'><div id="container" class='group'>
<div class='childs'>one</div>
<div class='childs'>two</div>
<div class='childs'>three</div>
<div class='childs'>four</div>
<div class='childs'>five</div>
</div>
</div>
CSS
#foo {
text-align:center;
}
#container {
background-color:beige;
display:inline-block;
}
.childs {
width:50px;
height:50px;
background-color:blue;
float:left;
margin-right:10px;
}
.group:after {
clear: both;
content: "";
display: table;
}
I used the "inline-block / text-align:center" technique to center the child divs in their main container. When you resize the window, the floated child divs collapse, that's what I want, BUT as they collapse they're not centered anymore within their container.
I want the cloud of these collapsing-on-resize divs, to be always centered.
Do you have any idea?
Edit : Thanks for the reply, that's pretty much what I'm looking for ! My concern however is that:
The reason why I used float left instead of inline-block is that I wanted those child divs to have no space between each others (which they do have as line elements unless I mess up my code indents to have those many childs on the same line code)
I want the collapsing final line to be aligned left just as the other lines, but the whole being centered.
Here's an update with the two issues above : http://jsfiddle.net/bQMj7/6/.
you may use inline-block for all of them and fake a float : center ; wich doesn't exist.
#container{
background-color:beige;
display:inline-block;
}
#foo{
text-align:center;
}
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin:5px;
}
DEMO http://jsfiddle.net/bQMj7/1/
Is this what you are looking for:
http://jsfiddle.net/collabcoders/bQMj7/3/
#container{
background-color:beige;
display:inline-block;
}
#foo{
text-align:center;
}
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin-right:10px;
}
.group:after {
clear: both;
content: "";
display: table;
}
EDIT: If I understand you correctly you want the space gone between blocks but still keep the center. inline-block for some reason put 4px space on the right so simply add margin-right: -4px; to fix:
HERE'S THE NEW FIDDLE: http://jsfiddle.net/collabcoders/bQMj7/10/
and the update to the .child class
.childs {
width:50px;
height:50px;
background-color:blue;
display:inline-block;
margin-right: -4px;
}
This css has been somewhat difficult to figure out...Basically what I want is what is in this picture, but with dynamically changing content.
so I set up my html like this, basically all the elements are piled into the wrapper, the pictures and titles will be dynamically rotating and will be different widths and heights:
<div id="wrapper">
<div id="title"><h2></div>
<div id="image"><img></div>
<div id="leftbutton" class="but"><img></div>
<div id="rightbutton" class="but"><img></div>
</div>
Everything I have tried Hasn't worked out. how should I go about this?
The closest I have got is this, but the title field can change heights and that makes this method not work, since, I have to position the image relatively and its relative position changes with the title element growing and shrinking:
#wrapper{
position:relative;
text-align: center;
}
.but{
z-index:20;
position:absolute;
}
#leftbutton{
left:0px;
}
#rightbutton{
right:0px;
}
#title{
z-index: 3;
display: inline-block;
width:auto;
min-width: 80px;
max-width: 340px;
}
#image{
z-index: 1;
position: relative;
top:-21px;
}
If you mean the Title in the center use this way:
#title {
margin: 0 auto;
width: /* your width */
}
the position should be relative at the wrapper.
JsFiddle UP
I just reorganized the body structure, adding one more div and floating everything.
Then inside the central section I added title and image that you can style to be centered to the relative div.
If you provided some example code we would better be able to assist you. In the meantime, the following code should take care of what you're looking for:
HTML
<div id="wrapper">
<div id="title"><h2>Article Headline</h2></div>
<div id="image"><img></div>
<div id="leftbutton"><img></div>
<div id="rightbutton"><img></div>
</div>
CSS
#wrapper {
background:#6cb6d9;
display:inline-block;
position:relative;}
#title {
position:absolute;
top:0;
width:100%;
text-align:center;}
#title h2 {
background:green;
color:white;
padding:10px 15px 10px 15px;
display:inline-block;
max-width:200px}
#image {}
#image img {
min-width:200px;
height:300px;
width:500px; }
#leftbutton {
position:absolute;
left:0;
top:0;
height:100%;
width:75px;
background:black;}
#rightbutton {
position:absolute;
right:0;
top:0;
height:100%;
width:75px;
background:black;}
Though instead of hardcoding the img size, just remove those lines of CSS to have the div automatically adjust to the default size of the img.
http://jsfiddle.net/b7c7c/
None of these solutions worked correctly, ultimately the way to get it to work is with this trick: How to center absolutely positioned element in div?
Then you just position all elements absolutely within the wrapper and the sub elements relatively as seen in the post
How can I make div 'left' and 'right' look like columns side by side?
I know I can use float:left on them and that will work... but on step 5 and 6 in here http://www.barelyfitz.com/screencast...s/positioning/
the guy says it is possible, I can't get it work though...
Code:
<style>
div.left {
background:blue;
height:200px;
width:300px;
}
div.right{
background:green;
height:300px;
width:100px;
}
.container{
background:black;
height:400px;
width:450px;
}
</style>
<div class="container">
<div class="left">
LEFT
</div>
<div class="right">
RIGHT
</div>
</div>
The usual method when not using floats is to use display: inline-block: http://www.jsfiddle.net/zygnz/1/
.container div {
display: inline-block;
}
Do note its limitations though: There is a additional space after the first bloc - this is because the two blocks are now essentially inline elements, like a and em, so whitespace between the two counts. This could break your layout and/or not look nice, and I'd prefer not to strip out all whitespaces between characters for the sake of this working.
Floats are also more flexible, in most cases.
A div is a block level element, meaning that will behave as a block, and blocks can't stay side by side without being floated. You can however set them to inline elements with:
display:inline-block;
Give it a try...
Another way is to place them using:
position:absolute;
left:0;
and/or
position:absolute;
right:0;
Note: For this to work as expected, the wrapper element must have a position:relative; so that the elements with absolute positioning stay relative to their wrapper element.
You can also use CSS3 flexbox layout, which is well supported nowadays.
.container {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
background:black;
height:400px;
width:450px;
}
.left {
flex: 0 0 300px;
background:blue;
height:200px;
}
.right {
flex: 0 1 100px;
background:green;
height:300px;
}
See Example (with legacy styles for maximum compatiblity) & Learn more about flexbox.
I am currently working on this, and i have already a number of solutions.
It is nice to have a high quality site, that i can use also for my convenience.
Because if you do not write these things down, you will eventually forget some parts.
And i can also recommend writing some basic's down if you are starting any kind of new programming/design.
So if the float functions are causing problems there is a couple of options you can try.
One is modify the div alignment in the div tag it self like so <div class="kosher" align=left>
If this does not suit you then there is another option with margin like so.
.leftdiv {
display: inline-block;
width: 40%;
float: left;
}
.rightdiv {
display: block;
margin-right: 20px;
margin-left: 45%;
}
Don't forget to remove the <div align=left>.
Use display:table-cell; for removing space between .Left and .Right
div.left {
background:blue;
height:200px;
width:300px;
}
div.right{
background:green;
height:300px;
width:100px;
}
.container{
background:black;
height:400px;
width:450px;
}
.container > div {
display: table-cell;
}
<div class="container">
<div>
<div class="left">
LEFT
</div>
</div>
<div>
<div class="right">
RIGHT
</div>
</div>
</div>
You can try with margin for right div
margin: -200px 0 0 350px;