Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 11 months ago.
Improve this question
I want to center two buttons that are on the same line, and then I want to position a selector on the same line, to the right of the two centered buttons. How can I do it? In other words, how can I position an element relative to a centered div?
EDIT: I want the end result to look something like this: https://i.imgur.com/KeVbCF2.png
Flexbox does the job quite well!
.wrapper {
background: gray;
display: flex;
text-align:center;
justify-content: flex-end;
height:40px;
align-items: center;
justify-content: center;
}
.m {
width: 100%;
}
.m button {
width: 100px;
}
.r {
width: 200px;
}
<div class="wrapper">
<div class="m">
<button>a</button>
<button>b</button>
</div>
<div class="r">Section C</div>
</div>
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 9 days ago.
Improve this question
I have an image prepended to a paragraph element (see photo below)
The CSS float property for the image is set to right.
The paragraphs and image are part of a div with bootstrap class "container" so the basic layout is just
<div class="container">
<img class="img-fluid">
<p>Text</p>
<p>Text</p>
</div>
However, I really hate the big, ugly white space next to the image. How can I get the next paragraph element to fill that space?
The styling on each element is as follows
p {
text-align: justify;
text-justify: auto;
}
img {
height: auto;
}
Tried CSS clear:both on divs that wrap the image and paragraphs.
You can try the following approach to fill the white space next to the floated image:
Wrap the image and the text in a separate div container, like this:
.image-text {
display: flex;
align-items: center;
}
img {
height: auto;
flex-shrink: 0;
}
p {
text-align: justify;
text-justify: auto;
flex-grow: 1;
}
<div class="container">
<div class="image-text">
<img class="img-fluid">
<p>Text</p>
</div>
<p>Text</p>
</div>
The display: flex property makes the .image-text container a flex container. The align-items: center property aligns the child elements (the image and the text) vertically.
The flex-shrink: 0 property on the image makes sure that the image will not shrink to fit the available space. The flex-grow: 1 property on the text causes the text to take up all the available space in the container.
This way, the text will automatically fill the white space next to the image, without having to use the clear property.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm using this example codepen as the basis of a simple site.
This works well but I'd like the layout to sit centred on the page, not full height. Please see example image.
Is there anyway to do this and retain the flexibility of the page ?
I've tried adding height or max-height to the wrap but that hasn't made any difference.
Thanks
So, you want to use align-items: center;. But you have to choose where to use it. If you want the sidebar to stay as it is, you should change the html code a bit:
<div class="content">
<div class="inner">
Actual content goes here.
</div>
</div>
and in css:
.content {
display: flex;
justify-content: center;
}
Now the yellow background will stay as it is, but the text will be vertically centered.
If you put display: flex; and justify-content: center; on .main both sidebar and content will get centered. Then it will look like that:
html:
<div class="content">
Actual content goes here.
</div>
and css:
.main {
flex: 1;
display:flex;
align-items:center;
}
EDIT:
Since I misunderstood the question I'll answer it here but I'll leave the part above because someone might find it usefull.
So, you will need to modify styling for .wrap. Since you have flex-direction: column; set on it, to center it vertically you have to use justify-content: center; instead of align-items: center because now the main axis is the vertical one. So:
.wrap {
display: flex;
...
justify-content: center;
}
.main {
max-height: 500px; /* set whatever you want */
...
}
use align-items property for this problem
.main {
flex: 1;
display:flex;
align-items:center;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I want to make my specific div element's child will be equal height with out using any jquery plugin or Javascript. I want to make this by CSS.
So can any one give me an idea how can i make this?
Yes you can.
You have to use css3 dispaly: table; for the equal height wrapper and display: table-cell; for the each element of equal height wrapper.
Here is the simple way.
HTML & CSS Code:
.equal-height-row{
display: table;
}
.equal-height-row > .equal-height-box{
display: table-cell;
vertical-align: middle;
padding: 2em;
box-sizing: border-box;
background-color: lightgrey;
}
<div class="equal-height-row">
<div class="equal-height-box">Box1<br>box 1 content</div>
<div class="equal-height-box">Box2</div>
<div class="equal-height-box">Box3</div>
</div>
A modern and preferred way is to use flexbox, which aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").
At this link, A guide to flexbox, you will find a really good start how it works.
.row {
display: flex;
}
.row > div {
flex: 1;
background-color: lightblue;
padding: 10px;
margin: 5px 10px;
}
<div class="row">
<div>First</div>
<div>Second<br>having<br>more than<br>one line</div>
<div>Third</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have a product description with bootstrap. Now I want that the is aligned with the image. Float left doesnt work. My image is to big so i want that is vertical aligned. here you can find a pen:
`https://codepen.io/anon/pen/WpVydZ`
You should put the ul & img in a wrapper div then add display: inline-block + vertical-align: middle to each.
And put the image before the ul
Example on "Wickelkommode" :
http://codepen.io/cyril-lamotte/pen/evqKxx
You could try this:
<div class="col-lg-6 sm-12">
<div class="row">
<div class="img-bett col-sm-6">
<img alt="" src="https://www.mixibaby.de/item/images/1003028/300x300/1003028-felix-grau-bett.jpg" style="width: 300px; height: 300px;">
</div>
<div class="bett-div col-sm-6">
<h3>Bett</h3>
<ul class="bett">
<li>3-fach höhenverstellbarer Lattenrost (von 21cm auf 36cm und 52cm)</li>
<li>Liegefläche: 70cm x 140cm)</li>
<li>Gesamtmaße L/B/H: ca. 145cm x 77cm x 85cm</li>
<li>3Bodenfreiheit: ca. 8,5cm</li>
</ul>
</div>
</div>
</div>
You are going to create two divs in the same row, the first stores the image and the second one the unordered list.
And in the css:
.row {
display:flex;
}
.img-bett, .bett-div {
flex: 1;
}
ul.bett {
position: absolute;
top: 25%;
bottom: 25%;
display: block;
height: 50%;
}
The display flex allow you to change the height of the two child divs
flex:1 make that both divs share the biggest height.
Also the position, and height of the ul makes room for him in the middle of the parent div.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have a question regarding placing two <div> containers side by side.
The code should later look like this:
<div class="wrapper">
<div class="leftColumn">navigation</div>
<div class="rightColumn">content</div>
</div>
http://jsfiddle.net/9NFDS/
Question:
Which of the two provided examples is more W3C conformant? Which way is better for creating a distance between the two container?
If you target the browser support for lower versions for IE (like IE7 or even lower) you need to work with the second approach (padding).
There will be an issue with your first approach as one of your container is left floated and one is right so the height of the parent div (wrapperExampleOne) will collapse and will result in 0px (which should be equal to the height of its children).
The better approach that works with most of the browsers is to use margin. An example is mentioned here in the third example of your modified fiddle here http://jsfiddle.net/9NFDS/4/
HTML:
<div class="wrapperExampleThree">
<div class="leftColumn">
</div>
<div class="rightColumn">
test
</div>
</div>
CSS:
.wrapperExampleThree
{
margin: 0 auto;
width: 900px;
}
.wrapperExampleThree .leftColumn
{
width: 200px;
height: 50px;
background: pink;
float: left;
}
.wrapperExampleThree .rightColumn
{
width: 650px;
margin-left:50px;
height: 50px;
background: green;
float: left;
}
i think 1st one.
<div class="wrapperExampleOne">
<div class="leftColumn">
</div>
<div class="rightColumn">
</div>
</div>
Making distance is common in today era. just like facebook, youtube, google.