I have this HTML code:
<span class="left">
<img class="avatar" src="image.jpg" />
</span>
<span class="right">
Lorem ipsum dolor sit amet, nunc euismod nisl nam euismod, quis maecenas blandit ac, neque sed ut pulvinar, lectus sagittis sapien mauris per risus vel. Ligula sapien sed morbi cras tellus commodo. Rutrum mattis accumsan, hac sed praesent, neque tortor neque, commodo mauris sagittis turpis, faucibus sed ultrices tempor interdum. Lobortis assumenda nisl, posuere cras sit risus egestas bibendum nec, magna in, sed mattis pharetra felis nulla vitae aptent, in semper et...
</span>
I would that the two blocks are positioned on the same line. I use this CSS:
.right {
width: 250px;
background-color: orange;
float: left;
}
.left {
width: 100px;
background-color: orange;
float: left;
}
It's good, but I want that the right side (the text) is not large 250px, but 100%. If I put width:100%, the block is not on the same line.
How can I do this?
Here is my solution to your problem - you set the width on the left item, and the margin on the right item. The left item is floated, the right item isn't. I have also made the display of the right item "block".
.right {
display: block;
margin-left: 100px;
width: auto;
background-color: orange;
}
.left {
width: 100px;
background-color: orange;
float: left;
}
For floated elements, if you want to use percentage widths, you should calculate the width of each:
.right {
width: 50%; /*or 45%*/
background-color: orange;
float: left;
}
.left {
width: 50%; /*or 55%*/
background-color: orange;
float: left;
}
Then they will display on the same line.
Also, if there are margins or paddings, you should take this into consideration when calculating the widths as if you set both to 50% but there is a margin of 10px, it will still force the next element onto a new line.
To make the .right element calculate the width, you need to set its width to width: auto; and counter-margin the .left element: margin-left; 100px; (where 100px is equal to the .left elemtents width).
Example for you here.
delete the width for the right class and the float. This will make the right class to get the remaining width of the parent element.
.right {
background-color: orange;
}
.left {
width:250px;
background-color: orange;
float:left;
}
example http://jsbin.com/ayaha3
Related
I want to exactly add image under title as linked image below using pure css. Similar image where can I find it?
and also how to position border ?
There is space between border and it is moved little down.
used css for img tag for second image:
img.profile {
display: flex;
margin: 0 auto;
justify-content: center;
width: 8rem;
height: 8rem;
border-width: 4px;
border-radius: .75rem;
border-color: rgba(156,163,175,var(--tw-border-opacity));
background-color: rgba(229,231,235,var(--tw-bg-opacity));
}
With pure HTML / CSS, i'll do it like so.
For the image, use flex to get the alignement you want. For the border, use box-shadow without any blur to control the offset of the border and border-radius to get the round corners.
HTML
<div class="container">
<h1>About us</h1>
<img src="https://cdn.pixabay.com/photo/2020/06/19/17/41/divider-5318234_1280.png">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam rhoncus sem ut orci varius rhoncus. Sed eu pulvinar enim. Vivamus egestas ac nisi quis semper. Nam pulvinar erat in rutrum scelerisque. Maecenas ac lectus ultricies, pretium mi in, bibendum urna. Aenean tempus aliquam leo ac dignissim. Maecenas sed porta velit. Cras ut nunc sit amet erat sagittis convallis vitae quis ante.
</p>
</div>
CSS
.container {
/* Flex properties */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* Border properties */
box-shadow: -5px 5px 0px black; /* x-offset | y-offset | blur to 0 | color */
border-radius: 10px; /* border-radius to get a curvy border */
width: 500px;
padding: 10px;
}
.container > h1 {
margin-bottom: 0px; /* Remove the space between title and img */
}
.container > img {
max-width: 70%;
height: 50px;
}
And the working fiddle
I'm in a situation where a certain element can have very short or very long content without me having any way to know which is going to be the case.
The way I would like to handle this is that if the element is shorter than its parent, I'd like the element to be centered horizontally and vertically within the parent; if the element is longer, I'd like it to be naturally positioned within the parent and to be able to scroll the parent (not the element itself) to see the content out of view. Here's a quick image I made to illustrate the case:
Is there anyway that I can do this with CSS only? I'll take any solution that is compatible with IE11.
What I tried
So far I tried centering the element within the parent with flexbox and adding overflow: scroll to the parent, but when the content is longer than the parent it still gets centered and gets cut both on top and at the bottom...
#parent {
display: flex;
align-items: center;
justify-content: center;
overflow: scroll;
}
I think this is what you are looking for:
* { box-sizing: border-box; } body { margin: 0; background: #ddd; }
.parent {
display: flex;
flex-wrap:wrap;
height: 80vh;
max-height: 100vh;
width: 40%;
margin: 5%;
background: white;
float: left;
padding: 15px;
overflow: auto;
align-items:center;
justify-content: center; /*Horizontally centers child in this case*/
}
.child {
background: #eee;
padding: 15px;
max-height: 100%;
overflow: auto;
/* width: 100%; you could give full width as well */
}
<div class="parent">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
</div>
</div>
<div class="parent">
<div class="child">
<p>Dummy text</p>
</div>
</div>
Update
What you needed to solve?
Ans: You needed was to give your child maximum height limit, max-height:100%, so that it won't get cut out at top and bottom.
Also you need to give the child overflow: auto no need for parent. Not overflow: scroll, as we don't need scroll tracks for child that doesn't need scrolls.
Codepen link to play around
Hope this helped you!
Feel free to ask, if any queries. :)
I seem to have found a solution myself inspired by this article:
#parent {
overflow-y: auto;
text-align: center;
white-space: nowrap;
// Any padding-bottom here won't work in IE11
}
#parent:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
#child {
text-align: left;
white-space: normal;
display: inline-block;
vertical-align: middle;
// Any padding-bottom here WILL work, even in IE11
}
This works just like intended, centering the child element within the parent when it's shorter, and causing the parent element to scroll if the child is longer. This is a plus, since if the child is narrower than the parent the scrollbar will still appear on the side of the parent.
Haven't tested it yet in all browsers, but I don't see why it wouldn't work since the 2011 article I linked above mentions the technique is supported by all browsers, including IE8+. I will test it though and update the answer in case I discover it's incompatible with any.
+++ UPDATE +++
I've tested this technique in Chrome, Firefox, Safari, IE11 and Ms Edge. It works everywhere. Like it was pointed out in the comments below, if you add any padding-bottom on the parent in IE11 it won't be rendered, but that can easily be fixed by transfering it to the child element if you can do that. Thankfully, I could!
i know this is a late reply but IMHO inline-block solution is a bit dirty
so here is my solution using flex box + extra div wrapper
https://jsfiddle.net/good/gyst4ufm
*{
box-sizing: border-box;
font-family: sans-serif;
font-size: 18px;
line-height: 1.4em;
color: #333;
}
.box{
resize: both; /* make boxes resizable */
overflow: hidden;
border-radius: 4px;
}
.container{
width: 500px;
height: 500px;
background: #333;
border: solid #333 1px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.wrapper{
width: 100%;
max-height: 100%;
overflow-y: auto;
}
.content{
width: 400px;
height: 400px;
padding: 20px;
background: #fff;
overflow: hidden;
margin: 0 auto;
max-width: 90%;
}
<div class="box container">
<div class="wrapper">
<div class="box content">
<p> to test layout you can resize both
content box (white area) and its container (black area)</p>
<p>- maximum content width is 90% of container</p>
<p>- if the content is smaller than conainert, it is centered horizontally and verticaly</p>
<p>- if the content is higher than container, use vertical scroll on container</p>
</div>
</div>
</div>
I want to be able to center most anything vertically on a screen:
For example
Forms
Buttons
Is this possible to do with some custom css class?
Right now I am using the code below. It works but is not very good as I choose at which percentage the content will start. So I need one of these for every page and if content becomes longer I have to modify the percentage.
.loginForm .scroll {
height: 100%;
}
.loginForm .loginForm-wrapper {
position: absolute;
top: 30%;
left: 0;
right: 0;
}
There are different ways to center content vertically. I'm often using the way to transform them. Let's say you got a container in which another element should be centered.
.container {
position: relative; /* required */
height: 150px;
width: 100px;
background: #efefef;
text-align: center;
border-radius: 4px;
}
.center-me {
display: block;
font-family: Consolas;
font-size: 12px;
padding: 5px 10px;
background: #000;
color: #fff;
border-radius: 4px;
position: absolute; /* required */
top: 50%; /* required */
left: 50%;
transform:
translateY(-50%) /* required */
translateX(-50%);
}
<div class="container">
<div class="center-me">
center
</div>
</div>
You could do something with a little bit of JS, though I think #Jan Unld's answer is sufficient.
calcMiddle = function () {
var middleObject = document.querySelector('#middle'),
middleHeight = middleObject.clientHeight / 2,
middleWindow = window.innerHeight / 2,
middleMargin = middleWindow - middleHeight;
middleObject.style.marginTop = middleMargin + "px";
};
calcMiddle();
body {
margin: 0;
}
#middle {
padding: 10px;
background: #abcabc;
}
<body onresize="calcMiddle();">
<div id="middle">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a arcu sed neque volutpat lacinia mattis vitae nulla. Mauris in rutrum dui. Nullam nec dui rhoncus diam aliquam molestie. Nullam volutpat odio dignissim lorem ornare luctus. Aenean iaculis lectus venenatis aliquam porttitor. Etiam facilisis libero nec risus blandit aliquam. Donec sed ipsum nibh. Vestibulum sit amet accumsan ipsum. Maecenas viverra auctor orci, et scelerisque enim congue et.</p>
</div>
</body>
Example:
http://jsfiddle.net/link2twenty/y7h60kr7/
I have a <ul> <li> and I require the use of display: inline-block;. This is required in order to "float" the li's whilst the last element is 100% wide of it's parent container and there could be any amount of li's (floating would mean the amount of li's is finite depending on the width of it's containing element). So the total width of the <ul> will be greater than the width of the viewport.
This is fine except I require the "floated" elements to multiline and I expect all elements which are not multi lined to be 100% height of the <ul>.
I can achieve what I want by setting the height of the <ul> in JS but this is something I really do not want to do.
Here is a JS fiddle.
http://jsfiddle.net/d5WBv/3/
Does anyone have a solution. I'm not sure if flexbox or display: table; can solve this but I cannot seem to get it to....
Thanks!
I guess, you mean that the li's all should have the same height?
If so, you could display them as table-cells:
ul {
display: table;
width: 100%;
}
li {
vertical-align: top;
display: table-cell;
padding: 10px;
margin: 0;
}
Also, check the updated fiddle.
I have a CSS solution for you, check out this Working Fiddle
DownSide: it requires to Double the ul li elements,
(one of them is for taking the real space in the document flow, (he don't render as we want but so will be hidden), and one of them is showed, on top of the other, with the display you want.
HTML:
<div class="Container">
<ul class="Hidden">
<li>This stays on one line</li>
<li>And this</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.</li>
</ul>
<ul class="Visible">
<li>This stays on one line</li>
<li>And this</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor libero neque, nec tristique metus rutrum et. Integer semper libero quis magna placerat, a posuere sem congue.</li>
</ul>
</div>
CSS:
*
{
padding: 0;
margin: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.Container
{
position: relative;
}
.Hidden
{
visibility: hidden;
}
.Visible
{
position: absolute;
top: 0;
height: 100%;
}
ul
{
white-space: nowrap;
background-color: #cccccc;
font-size: 0;
}
li
{
display: inline-block;
padding: 10px;
border-right: 1px solid red;
background-color: #2c2c2c;
text-align: center;
color: #fefefe;
white-space: normal;
vertical-align: top;
font-size: 16px;
height: 100%;
}
li:last-child
{
width: 100%;
border-right: 1px solid #2b2b2b;
}
I am struggling a bit to get this to work.
If you look at the following JSFiddle:
http://jsfiddle.net/JUDXq/
Is there a way to make the image block sit nicely next to the red block without it moving underneath the red block AND still have other images further down to be 100% width?
The image is on purpose as wide as the parent element. If an image is bigger than its parent, we can use "max-width:100% " to make it resize. But if there is a float inside the parent taking space, is there a way to do this?
<div class="parent">
<div class="left">
</div>
<p>
Lorem ipsum dolor sit amet, non ut, hymenaeos urna mi odio, non ac libero, turpis curabitur ante ultricies proin egestas convallis. In bibendum mauris quis placeat. Fusce interdum id faucibus dictum id adipiscing, non et elit, vel hendrerit libero, nulla donec ornare lacus et lacus lectus. In tristique, mauris mauris adipiscing neque, donec libero nulla sem lacus, nibh arcu nu. <strong> I would like the image to go right below this text.</strong>
</p>
<div class="one">
<img src="http://placekitten.com/500/200">
</div>
</div>
.parent { width: 500px; height:1000px; }
.left {float:left; width:100px; height:200px; background:red; display:block; }
.one { background:blue; }
Image hosted by Placekitten and taken by: Pieter Lanser
Thanks guys
Is this what you're looking for? http://jsfiddle.net/LQxVE/1/
.parent { width: 500px; height:1000px; }
.left {float:left; width:100px; height:200px; background:red; display:block; }
.one { background:blue; }
img {
float: right;
width: 400px;
}
if I'm understanding your comment, this might be more suited: http://jsfiddle.net/LQxVE/2/
.one {
background:blue;
width: 80%;
float: right;
}
img {
max-width: 100%;
}