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.
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 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>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am working on a response website.
I have a lots of data on a page, and at the bottom of page there is a fixed div, the data in this div is dynamic some time it has 2 lines some time 3 that may vary.
To protect the data at the bottom of the page from being hidden under the fixed div I want some empty space at the end of the page?
here is the code.
<style>
.screen-bottom-fixed {
position: fixed;
bottom: 0;
right: 0;
left: 0;
background-color:aqua;
padding-top: 8px;
}
.section-1 {
text-align: center;
background-color: red;
}
.section-2 {
text-align: center;
background-color:chartreuse;
}
</style>
<div class="page">
<div class="1">
about 200 lines of text here.....
</div>
<div class="screen-bottom-fixed">
<div class="section-1">
We have some lines of dynamic date here 11111.....
</div>
<div class="section-2">
We have some more dynamic date here 22222.......
</div>
</div>
</div>
Also suggest me good approach to have fixed data at the bottom of screen and the data on the page is safe from being hidden under the div.
I know that you not added js in tags for question, but js it`s first that comes to my head in this situation.
First add empty block before screen-bottom-fixed block
<div class="separator"><!-- empty block --></div>
Then with js you can control it height
$('.separator').height($('.screen-bottom-fixed').height());
Also you can recalculate it on window resize event
$(window).on('resize', function(){
$('.separator').height($('.screen-bottom-fixed').height());
});
Here is jsFiddle
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.
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'm having trouble finding a solution to my problem on the Web.
My problem is this :
Say I have three elements:
div#container with a varying width.
The container contains two elements - div#text with an unknown width and div#img with a fixed width. Both elements are inline:
<div id="container" style="width:auto">
<div id="text"> some varying text here... </div>
<div id="img" style="width: 10px; background: url(img.png)">
</div>
Where the styling for the text is somewhere along:
#text { width:auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
I want the location of the image to be close to the text, but at most at the rightmost border of the container, as illustrated by the image here
Is there a way to achieve this without using javascript? Though the container is appended to the document dynamically, and so width calculations cannot be used.
Thanks in advance
Found the answer. Took me a lot of time, and brought me to the darkest corners of CSS.
And yet, I've emerged enlightened - and the answer is so simple....
<div id="container" style="width:auto">
<div id="text"> some varying text here... </div>
<div id="img" style="width: 10px; background: url(img.png)">
</div>
And The CSS:
#text {
width:auto;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 10px;
margin-right: -10px;
box-sizing: border-box;
}
As shown in this fiddle
This was as close as I got to your requisitions:
Fiddle
Unfortunately, due to the behaviour of text-overflow: ellipsis, it's really hard to get the desired behaviour without setting a max-width. And then, the image won't be next to a shorter text-block. An option would be text-align: right as you see in my example.
It would be far more easier to just place the text on the right side:
Fiddle