Whenever I resize the browser, the 2nd div in .container positions below the first one.
<div class = "container">
<div class = "one"></div>
<div class = "two"></div>
</div>
The divs are really blank.
CSS
.container{
overflow: hidden;
width: 810px;
min-width: 810px;
}
.one,.two{
width: 300px;
height: 450px;
}
.one{float:left}
I just realized that, you are not floating the other element, this is causing it to shift down, you should use float: left; or right as it's a div so it will take up entire horizontal space, and hence it is pushed down.
Demo
.one, .two{
width: 300px;
height: 450px;
float:left; /* Float both elements */
background: #f00;
}
Alternative
You should use display: inline-block; and white-space: nowrap; to prevent the wrapping of the elements
Demo
This will gave you the same effect, the only thing is 4px white space, you can simply use
.two {
margin-left: -4px;
}
the above will fix the white space issue for you
Demo 2
Add this CSS. Demo.
.two {
margin-left: 300px;
}
PS: When works with float, you should clearfix.
Give your body a minimum width:
body {
min-width: 1110px;
}
Then, when the viewport gets smaller than 1110px the scrollbar will appear.
Note: if you add margin, padding or border to the divs, add it to the min-width of the body (or take some extra space).
Related
I have two child divs (inline-block) inside a wrapper div. I want the left Div to be centered and the right one simply on the right of the left div.
<div id="Wrapper1"><div id="leftElement1">LEFT ELEMENT</div><div id="rightElement1">RIGHT</div></div>
The Problem is, if I use margin-left to reposition the whole wrapper, the Left Element is not centered on small screen sizes.
If I center leftElement1 and use position: absolute to position rightElement1 the Warpper Div does not adjust its width and height according to its children.
For a better understanding check http://jsfiddle.net/aaq810gs/6/
Any help is appreciated!
If i understand right you want something like this:
#rightElement1 {
background-color: blue;
position: relative;
width: 100px;
display: inline-block;
height: 50px;
float: right;
top: -100px;
}
Applied in your first example.
fiddle
Or something like this:
#rightElement1 {
background-color: blue;
position: fixed;
width: 100px;
display: inline-block;
}
fiddle
I am not really sure if I get exactly what you mean, but I think something like this could work for you.
- You better switch to %, because than it will work better on mobile devices.
- Second thing is adding margin:0 auto; for #leftElement1 so it stays in the middle. #rightElement2 will just stick to it on the right, because it is inline-block.
Now you can add whatever margin to the wrapper and it stays the same.
Fiddle http://jsfiddle.net/stassel/vzx6fm55/
HTML:
<div id="Wrapper1">
<div id="leftElement1">LEFT ELEMENT</div>
<div id="rightElement1">RIGHT</div>
</div>
CSS:
#Wrapper1 {
width: 90%;
background-color: red;
margin: 0 auto;
white-space: nowrap;
padding: 10px;
margin-left:10%;}
#rightElement1 {
background-color: blue;
width: 10%;
display: inline-block;
height: 50px;}
#leftElement1 {
background-color: green;
width: 60%;
margin:0 auto;
display: inline-block;}
div {
height: 100px;
text-align: center;
color: white;}
SOLVED
Thank you for all your answers! Unfortunately I wasn't able to describe my Question properly, so none of the solutions worked.
Finally I was able to solve the problem myself. The Key to the solution was another centered outer wrapper, with a fixed size of the to-be-centered Element and overflow: visible. The inner content overlaps now the outer wrapper.
#outerWrapper {
width: 700px;
overflow: visible;
margin: 0 auto;
}
#Wrapper {
width: 810px;
background-color: red;
}
http://jsfiddle.net/aaq810gs/9/
In the following fiddle:
http://jsfiddle.net/6qF7Q/1/
I have a yellow content area that has a min-height set to 100% - it's the background div to all pages and should take up at least 100% of the available height. If there's overflow, it expands vertically.
Then, within that yellow container, I have another child div (red) that I would like to take up as much vertical space as its parent. It seems I can't set height because the parent element only has min-height, and setting min-height on the red element doesn't work either.
So right now, the yellow is behaving as I'd like, but the red is not expanding. How can this be achieved with CSS only?
CSS:
.browser {
background-color: blue;
height: 600px;
width: 200px;
position: relative;
}
.innercontent {
min-height: 100%;
background-color: red;
width: 100%;
color: white;
padding: 2px;
}
.content {
background-color: yellow;
width: 100%;
min-height: calc(100% - 30px);
}
.footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background-color: orange;
height: 20px;
}
HTML:
<div class="browser">
<div class="content">
<div class="innercontent">
This is the problem - I need this to take up 100% of the remaining yellow space, without setting the parent element's 'height' - only min-height is specified in the parent because I need to make sure that it takes up 100% of the height at least, but allow it to extend vertically if there's any overflow.
</div>
should not see any yellow
</div>
<div class="footer"></div>
</div>
Take a look at this
I added this
*{
box-sizing: border-box;
}
html, body {
/* Make the body to be as tall as browser window */
height: 100%;
}
and changed some attributes u can see at fiddle
If thats what you want you should read this article
http://css-tricks.com/a-couple-of-use-cases-for-calc/
I made that based in this use-cases
I think this might solve your issue?
I have changed the innercontent to position: absolute
http://jsfiddle.net/6qF7Q/7/
If you have text in the yellow section it will always show.
Also, you're going to have to do a bit of fiddling to get your footer positioned correctly since you are going to have an overflowing absolute element. I think a full body position: relative wrapper will solve it.
P.S I don't see why you would need a .content AND a .innercontent if you don't want the .content to show?
This works much better and doesn't give you footer grief: http://jsfiddle.net/6qF7Q/9/
I have three nested DIV elements like this:
<div id="outer">
<div id="innerA">
<div id="innerB">
This<br/>is<br/>a<br/>multiline<br/>testcase.<br/>
This<br/>is<br/>a<br/>multiline<br/>testcase.<br/>
</div>
</div>
</div>
#innerA has a height of 100% which makes it as big as #outer. #innerB's height is left to be auto so it gets as high as its contents. Now when i set #innerB to have margin-top: 10px for example i would expect that #innerB will get a margin in relation to #innerA. What happens instead is that #innerA gets this margin in relation to #outer.
How is this possible? It seems like this has nothing to do with box-sizing at least its not fixable this way.
Here's the CSS:
#outer {
width: 500px;
height: 300px;
background: yellow;
overflow: auto;
}
#innerA {
width: 100%;
height: 100%;
background: green;
}
#innerB {
margin-top: 10px;
background: blue;
}
and the fiddle:
http://jsfiddle.net/7e2H5/
(Here i would expect that the green DIV fits the yellow one, and that there are 10px of the green one visible above the blue DIV).
Seems like it's a "Margin collapsing" problem. Check the DEMO
I've added padding: 1px 0;
More info: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
Just found this: margin-top in a nested div
This is interesting but I wouldn't say that adding padding is a more appropriate answer.
#innerA {
width: 100%;
height: 100%;
background: green;
display: inline-block;
}
Here's a demo on JSFiddle.
I hope this helps!
I would replace #innerb margin with #innera padding
According to the Mozilla link provided by Chris, adding floats also prevents margins from collapsing:
Add float: left; to #innerA as shown in this fiddle:
http://jsfiddle.net/7e2H5/10/
See: https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
I have a footer to posts on a blog, the posts are of dynamic with.
There are some elements in the footer that are left-aligned, one that's right-aligned and one between them that should fill the remaining space.
I thought I could use
text-overflow:ellipsis
which works if I set it to a fix width, but at the moment, the space-filling element just gets too large so the last element breaks to a new line.
Adding
white-space:nowrap;
to the outer container didn't help.
Also it'd be a nice bonus if the space-filling element would always fill the remaining space, even if it's content is not large enough.
Here is my fiddle http://jsfiddle.net/MFxk5/ , the space-filling element is the
<a href="c" class="c">...
Thanks to everyone for helping out! Maybe some will mark this as duplicate, but I think the combination with text-overflow:ellipsis makes this unique - I really searched for a solution.
Sounds like you want a fixed-fluid-fixed layout here is how you do it in pure css. If its not what you mean let me know. a Fiddle to view: http://jsfiddle.net/rE2NC/ just move the viewport left and right and you will see how the middle expands contracts as the width does.
HTML
<div class="FooterContainer">
<div class="Footer">
<div class="Left">Left</div>
<div class="Middle">Middle</div>
<div class="Right">Right</div>
</div>
</div>
CSS
.FooterContainer {
width:100%;
}
.Footer {
padding-left:200px; //or whatever width you want the .Left to be
padding-right:200px; //or whatever width you want the .Right to be
}
.Left {
width:200px; //Should match the padding-left of .Footer
margin-left:-200px; //Should be the negative of the width
float:left;
}
.Right {
width:200px; //Should match the padding-right of .Footer
margin-right:-200px; //Should be the negative of the width
float:left;
}
.Middle {
width:100%; //This fills the rest
float:left;
overflow:hidden; //use this to make sure text dont flow out
}
jQuery Solution
I started with a jQuery assisted solution.
The CSS looks like:
div {
width: 100%;
overflow: auto;
}
a {
border: 1px solid gray;
margin: 3px;
height: 50px;
float: left;
}
.c {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.d {
float: right;
}
and the jQuery function:
$("div").each(function(){
var innerWidth = 0;
$(this).find("a").not(".flex").each(function(){
innerWidth += $(this).outerWidth(true);
});
var flexWidth = $(this).width() - innerWidth - 9; /* padding + border + 1 */
$(this).find(".flex").width(flexWidth);
});
There is a hard coded constant that represents the left/right padding and border on the flexible with div (a.c in your example), and for some reason, there is a 1px adjustment to keep the floats on a single line. (Not quite sure the origin...).
Fiddle: http://jsfiddle.net/audetwebdesign/HmvsN/
Mix of Fixed Widths with Floats
I made a slight adjustment to the HTML as follows (move a.d in front of a.c):
<div class="ex2">
First column
Second column
Last column
Very long text...
</div>
and use the following CSS:
.ex2 a {
border: 1px solid gray;
margin: 3px;
height: 50px;
}
.ex2 .a {
width: 90px;
float: left;
}
.ex2 .b {
width: 90px;
float: left;
}
.ex2 .c {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
margin: 3px 100px 3px 199px;
}
.ex2 .d {
width: 90px;
float: right;
}
Essentially, float the left two elements and the right one such that it wraps around the wider one. The width of the wider element has left/right margins to accommodate the floated elements.
Overall, both approaches have merit, but it seems to be a lot of work for what we are getting...
I have a responsive element where it's width and height will both scale. Inside this I have some text which I want to center vertically.
How can I set the text's line-height to be the same as it's parent if I don't know the parent's height?
line-height: 100% is relative to the font's regular height so this doesn't help...
Here's another way to center an element vertically. I came across this technique some time ago. Basically it uses a pseudo element and vertical-align: middle.
.block::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
Since it's 2019 already, you could also use flexbox to achieve this :)
To do so, add the following classes to the parent element:
display: flex;
flex-direction: column;
justify-content: center;
See this Fiddle
I'd try putting the text inside another element, of which you know (or set) the size. Then setting relative positioning to it, top, left 50% and negative left and right margins.
See this Fiddle
The only problem is that this relies on a known/fixed textblock. If the text is variable, I'm afraid you will have to resort to using Javascript..
Regarding hyperlinks:
I was having this problem regarding links in main menu. And since it was <a> in <li> tags I needed some surface for the links to be clickable/touchable(see touch target size).
So what I did was for the <ul> I set a fixed height(through it's parent in this case), the <li>-s are a percentage of it and the <a>-s have a min-height and line-height properties set to them and it's easy from there to set the top. The code:
.menu-header-main-container{
position: fixed;
top: 0;
bottom: 160px;
}
.menu-header-main-container ul.menu {
height: 100%; }
.menu-header-main-container ul.menu li {
height: 33.33%;
max-height: 110px; }
.menu-header-main-container ul.menu li a {
line-height: 40px;
min-height: 40px;
top: calc(50% - 20px);
position: relative; } }
You cannot set the line-height to 100% of the parent element's height with only CSS. Rather, you can use CSS to center an element vertically.
.parent {
height:150px;
position:relative;
border:1px solid #FDD;
}
.position-center {
position:absolute;
top:50%;
transform:translateY(-50%);
}
<div class="parent">
<span class="position-center">I am vertically centered element</span>
</div>
Wow, 2022 and I don't think we have a decent way to do this still. What I used to do and I think is the less painful idea is to use a table for layout. Tables will naturally center text vertically, or you can use "vertical-align"
<table style="width: 100%; height: 100%; text-align: center">
<tr><td>Your text</td></tr>
</table>
Not great, but at least you can center text without ever having to specify fixed heights.