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
Related
I've been enjoying and having success mocking up webpages with CSS. But then I decided to play with a "fixed menu" and my understanding is now not so clear.
So my brief knowledge make a blank HTML doc and then create a "container" div and place all your further elements within the "parent" container. No problem with this and all has been well with floating elements and such.
But when placing a "fixed" element within my parent div I'm lost as to why the fixed element observes the parent's left margin and ignores it's right margin.
html, body{margin: 0; padding: 0;}
#container
{
margin:0px auto;
width:90%;
height:500px;
background:#A8A8A8;
}
.fixed-menu
{
position: fixed;
height: 50px;
width:100%;
background-color: #00a087;
}
<body>
<div id="container">
<div class="fixed-menu"></div>
</div>
</body>
So with the above the "fixed" block does align with the left margin of the parent container but runs completely to the right edge of the browser page. I have figured out that I can make the fixed block 90% and resolve the issue but I don't understand why. Why would the block not be 90% of the parent "container" block.
I look forward to you knowledge.
Thanks
Update your css like below to achieve your desired result. Inherit your width from the parent instead of using 100%.
.fixed-menu
{
position: fixed;
height: 50px;
width:inherit;
left:auto;
right:auto;
background-color: #00a087;
}
DEMO
as stated by #freestock.tk, a fixed element is "fixed" to the screen viewport.
the width (and height of set in %) is computed relative to the screen viewport.
it looks like it's aligned to left margin of the parent container because you did not positioned it with left or right css properties, it's not constrained by the parent container, it is just at the same horizontal position in this peculiar case.
if you set
left:0;
it will align to the left margin of the viewport and ignore the parent container, this should help you better understand his fixed positioning.
html, body{margin: 0; padding: 0;}
#container
{
margin:0px auto;
width:90%;
height:500px;
background:#A8A8A8;
}
.fixed-menu
{
position: fixed;
left:0;
height: 50px;
width:100%;
background-color: #00a087;
}
<body>
<div id="container">
<div class="fixed-menu"></div>
</div>
</body>
You where almost there, just add to .fixed-menu few css rules more :
.fixed-menu {
left:0;
right:0;
margin:0 auto;
width: 95% // now you can change width and fixed element will be centered always
}
I have two div's side by side. On the left is an image, on the right are inputs.
The image varies depending on what the user uploads.
How can I vertically centre align the image and the inputs? I would like the inputs to appear vertically centre to the image.
Both the img and inputs have their own container:
<div class="img-container">
<div class="data-container">
Fiddle:
http://jsfiddle.net/vbLht/
Remove float:left and try display CSS Rule
.img-container {
width: 50%;
display:inline-block;
vertical-align:middle;
}
.data-container {
width: 50%;
display:inline-block;
vertical-align:middle;
}
Fiddle
Note: You need to set <!-- --> to your mark-up after inline divs as css inline rule will leave white-space between 2 elements, Though this an awkward way but if you don't want to write that crack then you've to adjust width.
Or
Set your li style to display:table with the above CSS Code
li{
display:table; /*remove float*/
}
.img-container {
width: 50%;
display:inline-block;
vertical-align:middle;
}
.data-container {
width: 50%;
display:inline-block;
vertical-align:middle;
}
Hope this is clear :)
Flexbox makes this very easy.
Just wrap the child elements you want to vertically center in a wrapper div with:
.wpr {
display:flex;
align-items: center; /* align vertical */
}
FIDDLE
Browser support is good in modern browsers - caniuse..
but if CSS3 isn't an option, the display:table approach (As mentioned in the other answer) is fine.
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%;
}
I have two floated div in a wrapper. They are left and right. I wanted to make the right div to appear at the top of first div(left). Right should come first and left should come at second.
Here is the code
<div id="wrapper">
<div id="left">
left
</div>
<div id="right">
right
</div>
</div>
CSS
#left{
float:right;
}
#right{
float:left;
width:100%;
}
#wrapper{
width:100px;
background-color: #000fff;
}
I'm looking to have the same 100% as width for right div. Is this possible without changing markup and doing changes in CSS alone?
JSFIDDLE
EDITED
I want the right div to be in top and left should in bottom after that. When i use position absolute for the right div then left div is hidden. JSFIDDLE.
Should look like this
Use the following css :
#left{
float:right;
border: 1px solid black;
}
#right{
float:left;
position: absolute;
top: 0px;
}
#wrapper{
width:100px;
background-color: #000fff;
}
If you want place the right div before left, just remove the float:left property from #right.
Fiddle
If you want the right DIV above the left, you need to use absolute position
First of all clear the float, then set position:relative to the parent "wrapper" and position:absolute; to the right div.
Check out this fiddle
If you want to do this with just css you have to use absolute positioning. But only if you know height of each element and exact number of elements like this. Check this fiddle.
Let's assume each element has 20px height, then you can place one at top: 0px and second at top:20px. And to use remaning space like usual relative way, you must add padding equals to total height of your elements that has absolute positioning to wrapper.
Alternatively you can use JavaScript to change order in html.
I'm not too convinced by the answers so far. I would recommend avoiding 'absolute' and even javascript. Also if you want to make it friendly to all browsers you should really be specifying things such as height. It's a common misconception that a design can't be worked on every modern browser without huge hacks (i was doing it years ago for IE5.5 and firefox etc), its usually due to the CSS not being properly formed and valid. Now try the following:
#left, #right {position:relative; float:left; height:30px; color:white; width:inherit; }
#left{
background-color:blue;
margin-top:30px;
}
#right{
background-color:green;
margin-left:-100%;
margin-top:0;
}
#wrapper{
width:100px;
background-color: #000fff;
}
I am trying to align two divs horizontally and I got it to work using display:inline-block
however when I put overlfow-x:scroll to the main container it doesn't work. If the screen is smaller, one of the div goes to the bottom. How can I achieve this? I don't want the second Div to go to the bottom if the screen is small.
Here's fiddle
<div class="container">
<div class="test1">test1</div>
<div class="test2">test2</div>
</div>
.container{
display:table;
margin: 0 auto;
overflow-x:scroll;
}
.test1{
background-color:red;
width:500px;
margin-left:16px;
display:inline-block;
}
.test2{
margin-left:40px;
display:inline-block;
background-color:gray;
width:80px;
vertical-align:top;
}
give parameters to width and height, so container can overflow.
http://jsfiddle.net/f5HWD/3
.container{
width: 900px;
height: 700px;
display:table;
margin: 0 auto;
overflow:scroll;
}
I altered your code slightly and made the contents float left.
In order you get it to work, you just had to create a wrapper class. You need the outside container to be large enough to just fit your test divs, while the wrapper is large enough to hold both combined. This should be fairly easy to figure out and edit according to the heights/widths that you want the divs to be.
Fiddle
Hope it helps.