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.
Related
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 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 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 8 years ago.
Improve this question
I want to make 2 full width columns in one box. first column has width: auto and I want second column in 100% minus first column's width, so they can display inline. could someone help me, please?
UPDATED
checkout this fiddle:
http://jsfiddle.net/cvxr31xo/2/
<div id="major">
<div id="one">Hello</div>
<div id="two">World</div>
</div>
#major {
width: 100%;
border: 1px solid black;
}
#one {
width: auto;
float: left;
background-color: green;
height: 100px;
}
#two {
width:auto;
min-width:100%;
background-color: blue;
height: 100px;
}
if you need additional features let me know I will update
I'm not sure if you're after Table or straight DIVs for this.
<div style="width:100%; border:1px solid red;">
<div style="display: inline; border: 1px solid black;">Some content</div>
<div style="display: inline; border: 1px solid black;">Some more content</div>
</div>
The second div inside the box div isn't 100% wide, but both divs will expand to content, if that's what you're after...
To achieve this I think you either have to use a table, or mimic one.
Table:
<table style="width: 100%">
<td>col1</td>
<td>col2</td>
</table>
Divs
<div style="width: 100; display: table">
<div style="display: table-cell">col1</div>
<div style="display: table-cell">col2</div>
</div>
Both solutions should make the columns add up to 100% and have automatic widths for both columns. The browser will assign width to them as it sees fit, depending on their contents, so it won't actually first size column 1 independently and then assign column 2 the remaining space, but will find the "best compromise" for both columns.
Edit: The float based solution of #Charlie is actually better in a sense, as it does size the left column independently. However, if the left columns grows too big, the layout may break.
To achieve what you want, #Charlie answered very well, perfect answer. https://stackoverflow.com/a/26757381/3964593
I dont know if you want make it dynamically, or what goal are you trying to achiev, but, still, if the content of one div goes bigger than the other, you should be prepared to handle it.
Like making sure you put a max-width for one or both divs, setting the right amount of height px's or percents, etc. to make it behave right.
try this code.....
<div style="width:100%;">
<div style="float:left; width:49.7%; border: 1px solid black;">Some content </div>
<div style=" float:right; width:49.6%; border: 1px solid black;">Some more content </div>
</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'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