I want to place two divs alongside each other. Second one to be centered and the first one to be on the left from second and to be sticked / fixed. Because of the last condition the existing solution does not work (attribute position is already used there for both divs). How can I solve this?
Something like this:
.container {
display: flex;
height:100%;
}
.left {
margin-left: auto;
width: 0;
display: flex;
justify-content: flex-end;
}
.centered {
margin-right:auto;
padding:5px;
background:green;
height:100%;
}
.left span {
position:fixed;
white-space: nowrap;
padding:5px;
background:red;
}
body {
height:200vh;
}
<div class='container'>
<div class='left'><span> some content</span></div>
<div class='centered'>centered</div>
</div>
Related
I am new to css - thanks in advance for the help.
I have a parent div with two child divs in it. I want it so that the parent div spans 100% of the window and then to have the combined width of the two child divs be a max-width and centered within the parent div.
Here is what I have so far:
.learnings-main-content > * {
display: flex;
justify-content: center;
flex-basis: 100%;
padding: 20px;
background-color: #ef972d;
}
#learnings-main-content-area1 {
/*left side where content will live*/
}
#learnings-main-content-area2 {
/*right side where content will live*/
}
Thanks for the help, this has been a real pain and I am sure it's simple enough.
*{
margin:0;
box-sizing:border-box;
}
.learnings-main-content {
height:100vh;
width:100vw;
display: flex;
}
#learnings-main-content-area1 {
background-color:red;
flex:1;
}
#learnings-main-content-area2 {
background-color:blue;
flex:1;
}
<div class="learnings-main-content">
<div id="learnings-main-content-area1">
sa
</div>
<div id ="learnings-main-content-area2">
sa
</div>
</div>
Just change your CSS class .learnings-main-content to the example below:
.learnings-main-content {
display: flex;
justify-content: center;
flex-basis: 100%;
padding: 20px;
background-color: #ef972d;
}
I am trying to vertically align two divs in a parent div.
The vertical align is straightforward, but I am also trying float the divs, one left and one right.
Is this possible to do?
.outer {
background: red;
height: 300px;
display: flex;
align-items: center;
}
.inner_right {
background: blue;
float: right;
}
.inner_left {
background: yellow;
float: left;
}
<div class="outer">
<div class="inner_right">
RIGHT MIDDLE
</div>
<div class="inner_left">
LEFT MIDDLE
</div>
</div>
https://jsfiddle.net/xh8rbnmh/
body { margin: 0; }
.outer {
display: flex;
align-items: center;
justify-content: space-between; /* 1 */
background: red;
height: 300px;
}
.inner_right {
order: 1; /* 2 */
/* float: right; */ /* 3 */
background: aqua;
}
.inner_left {
/* float: left; */ /* 3 */
background: yellow;
}
<div class="outer">
<div class="inner_right">RIGHT MIDDLE</div>
<div class="inner_left">LEFT MIDDLE</div>
</div>
methods for aligning flex items on main axis
the flex order property can move elements around the screen
floats are ignored in a flex formatting context
Simple. You need to put your left div first in the markup. Then simply add margin: auto to the right div.
Note that if you need to retain the original markup (with the right div first, then the left div), flexbox allows you to order the divs using the intuitive order: property on each div.
I've updated the fiddle here: https://jsfiddle.net/v6facjnp/4/
This is alternative solution not using flexbox - noticed that margin has to be height of element.
.outer {
background: red;
height: 300px;
position:relative;
}
.inner_right {
background: blue;
position:absolute;
right:0px;
top:50%;
margin-top: -18px;
}
.inner_left {
background: yellow;
position:absolute;
top:50%;
left:0px;
margin-top: -18px;
}
First lets fix, some: left at the left, right at the right
<div class="outer">
<div class="inner_left">
LEFT MIDDLE
</div>
<div class="inner_right">
RIGHT MIDDLE
</div>
</div>
Second: Flex makes the elements to behave like blocks, discarding the float property. So we use margins and justify
.outer {
background: red;
height: 300px;
display: flex;
align-items: center;
justify-content:flex-end; //Move all items to the right
}
.inner_right {
background: blue;
}
.inner_left {
background: yellow;
margin-right:auto;//Move this to the left
}
Looking to fit 2 horizontal divs in a 100% repsonsive div. So the 2 internal divs will resize when the screen shrinks/increases.
<div class="mydownloads">
<div class="warrantybook"></div>
<div class="brochurebook"></div>
</div>
.mydownloads {
width:100%;
}
.warrantybook {
padding:10px;
float:left;
display: inline-block;
margin-left: auto;
margin-right: auto;
width:45%;
}
.brochurebook {
padding:10px;
float:right;
display: inline-block;
margin-left: auto;
margin-right: auto;
width:45%;
}
You want to set the full div to 100% and the 2 internal divs to 50% and remove all padding, border and margin. I would recommend setting a "min-width" in css to ensure there is always a minimum, I've seen a lot of sites look goofy without having a minimum width on certain things.
<div class="mydownloads">
<div class="warrantybook"></div>
<div class="brochurebook"></div>
</div>
.mydownloads {
width:100%;
}
.warrantybook {
padding:0;
margin:0;
border:0;
float:left;
width:50%;
background:red;
height:50px;
}
.brochurebook {
padding:0;
margin:0;
border:0;
float:right;
width:50%;
background:blue;
height:50px;
}
https://jsfiddle.net/gn6jabb9/
This can be done easily enough with floats or inline-blocks, though the clean 'new' way is with Flexbox. Assuming you don't need support for IE < 10:
.mydownloads {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: flex-start; /* Change this to 'stretch' if you also want full height */
}
.warrantybook,
.brochurebook {
flex-grow: 1;
height: 50px;
}
.warrantybook {
background:red;
}
.brochurebook {
background:blue;
}
https://jsfiddle.net/gn6jabb9/1/
I'm struggling trying to set up a really basic layout with CSS. I've created the following jsFiddle to help explain (code is copied below).
http://jsfiddle.net/drmrbrewer/10jq4zka/1/
Basically, what I want is for the first, second and third divs to be on one row, with the first and second divs positioned sequentially as far to the left as possible, and for the third div to be centred in the space that remains to the right of the second div. The row should fill 100% horizontally, so that when the window is resized the third div will remain centred within its space to the right of the second div, while the first and second divs remain static.
#outer-container {
position: absolute;
width: 100%;
}
#inner-container {
position: relative;
width: 400px;
}
#one {
width: 200px;
text-align: center;
float: left;
}
#two {
width: 200px;
text-align: center;
float: left;
}
#three {
width: 200px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
<div id="outer-container">
<div id="inner-container">
<div id="one">one</div>
<div id="two">two</div>
</div>
<div id="three">three</div>
</div>
I am not sure why you need the inner-container. You can achieve what you are looking for without using the inner-container (if the html is editable, ofcourse).
Let me explain it instead of just giving the code :
You can float the first two div's left. This will align them right next to each other. You can then add a text-align: center on the parent and that will take care of center aligning the third div.
You can check out the JSFiddle link http://jsfiddle.net/b5jk1d6k/ so that you can resize and see that the third div is center aligned on resizing the browser window.
div {
display:inline-block;
height: 100px;
width: 50px;
}
div.outer-container {
display: block;
text-align: center;
width: 100%;
}
.one {
background-color:orange;
float:left;
}
.two {
background-color:red;
float:left;
}
.three {
background-color:yellow;
}
<div class="outer-container">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</div>
Hope this helps!!!
Adding on to Satwik Nadkarny's Answer, if you know that div 1 and 2 are set to 200px you can set 3 to the remaining by giving the width of div 3 too:
width: calc (100% - 400px);
Which just gets the width of the browser window and subtracts the width of both divs 1 and 2.
div {
display:inline-block;
height: 100px;
width: 50px;
}
div.outer-container {
display: block;
text-align: center;
width: 100%;
}
.one {
background-color:orange;
float:left;
width: 200px;
}
.two {
background-color:red;
float:left;
width: 200px;
}
.three {
background-color:yellow;
width: calc(100% - 400px);
}
I have an unknown amount of divs that will be populated within an inline-block div. There's no problem when there is more than one div as it looks fine, but when there is only one div I want it to be centered in the parent. I want to try to do this without any fixed/absolute positioning and hopefully without using javascript.
In the fiddle you can see the first column, the div with "Put me in the middle" should be in the middle.
http://jsfiddle.net/Lzzyywf2/5/
<div class="inlineb">
<div class="insideInline">Hello</div>
</div>
<div class="inlineb">
<div class="insideInline">Hello</div>
<div class="insideInline">Hello</div>
</div>
.inlineb {
min-height:102px;
display:inline-block;
border:1px red solid;
vertical-align:top;
}
.insideInline {
height:50px;
border:1px solid blue;
}
Try :only-child for .insideInline. This will target the element if there is only one inside the parent. Here's my fiddle.
#wrapper {
}
.inlineb {
min-height:102px;
display:block;
border:1px red solid;
vertical-align:top;
width:126px; /*or whatever value*/
}
.insideInline {
height:50px;
border:1px solid blue;
display:inline-block;
width:37px;/*or whatever value*/
}
.inlineb .insideInline:only-child {
display:block;
margin:0 auto;
}
If you are able to manually add a class for those containers with only one child, this would work:
http://jsfiddle.net/Lzzyywf2/6/
<div class="inlineb one-child">
<div class="insideInline">Hello</div>
</div>
combined with:
.one-child:before {
content: "";
display: block;
height: 25px;
}
If you can't add a class, this will work in IE9+:
http://jsfiddle.net/Lzzyywf2/9/
.insideInline:only-child {
display:block;
margin-top:25px;
}
Credit to the OP for improving on this idea!
Flex box will make your life easier:
.flex-contain{
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
width:900px;
height:500px;
background:#000;
align-items:center;
align-content:center;
}
.flex-item {
height:200px;
width:200px;
background:yellow;
margin:0 auto;
}
http://codepen.io/cjthedizzy/pen/vEpyvR