I need to align 2 paragraphs side by side so that I can have all the information taking up less vertical space.
I need for one column to take up around 25% of the whole page's width, so that both columns take up around 50% of the page's width.
Thanks in advance
You can use flexbox CSS modal to control the content flow
.flex-wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 50%;
}
.flex-wrapper .item {
flex: 0 0 auto;
width: 50%;
}
<div class="flex-wrapper">
<p class="flex-item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem quia cumque aspernatur ut modi suscipit. Sunt natus reiciendis, quisquam enim iste facere incidunt voluptate voluptates amet, minus cupiditate molestiae provident.
</p>
<p class="flex-item">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem quia cumque aspernatur ut modi suscipit. Sunt natus reiciendis, quisquam enim iste facere incidunt voluptate voluptates amet, minus cupiditate molestiae provident.
</p>
</div>
Related
I am currently goofing around making a website. I want to make a description div in the center of the screen that will stay centered, and when the screen rezises not stretch up and intersect or overlap other elements. How would I go about this? For further demonstration I will post a video below of what I don't want.
https://imgur.com/a/pboUcAB
* {
margin: 0;
padding: 0;
--link-easing-time: 0.15s;
}
body {
display: flex;
flex-direction: column;
}
.overview {
background-image: url(/Images/1.jpeg);
background-size: cover;
width: 100%;
height: 25em;
display: flex;
justify-content: center;
align-items: center;
margin-top: 5em;
}
.overview div {
width: 50%;
background-color: rgb(30,30,30);
border-radius: 1em;
display: flex;
flex-wrap: nowrap;
flex-basis: initial;
justify-content: center;
align-items: center;
flex-direction: column;
}
.overview p {
margin: 1em;
color: rgba(255,255,255,0.9);
}
.overview a {
margin: 1em;
}
<body>
<div class="overview">
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias, inventore sint, nam sunt nihil ipsam quia accusantium praesentium voluptates, fugiat dolorum rerum officia. Nisi aperiam cumque totam molestias earum commodi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error consectetur dolorem magnam nobis officiis minima facilis vel corrupti totam fugiat tempora alias libero accusamus illo animi delectus, ut nostrum consequatur.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Suscipit excepturi, modi repudiandae ad itaque adipisci ratione a sed, voluptatem, quas aliquam dolore commodi eos possimus dignissimos nobis rerum enim tenetur?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam inventore unde sequi laudantium sapiente, quisquam necessitatibus officia eum autem nihil exercitationem, magni corporis fuga nulla eligendi! Provident explicabo recusandae earum!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis alias molestiae impedit dolores consectetur delectus voluptas saepe nam blanditiis dolorum. Inventore omnis dicta consequatur mollitia magnam! Cum corrupti aspernatur sapiente.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, laborum non. Fugit id inventore, sequi minima explicabo optio at ut, repellat ipsam quia nemo! Libero quidem eaque obcaecati tenetur dolor.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi exercitationem sint necessitatibus perferendis tempore quisquam earum ipsa minima, obcaecati dolore. Ut, unde. Mollitia animi assumenda facilis quis dolores provident asperiores!
</p>
<a href="" class="hover-effect">
Learn More
</a>
</div>
</div>
</body>
I attempted messing with flex-basis:initial and flex-wrap: nowrap;.
So I re wrote the code and what conclusion I reached was that: the <p> tag was effecting the parent div size so once I gave the p tag a height and width containment and set the overflow to hidden it worked great!
I'm a little bit stuck to be honest. Here is an example of my original code, the problem is that when I change my flex direction from row to column my picture disappears and I don't understand why =>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: rgb(104, 92, 76);
}
.container {
display: flex;
flex-direction: row-reverse;
background-color: black;
max-width: 700px;
margin: 20vh auto;
}
.content {
width: 100%;
}
.text {
color: white;
}
.image {
background: url('https://www.silocreativo.com/en/wp-content/uploads/2017/04/flexbox-cssgrid-practical-example.png');
width: 100%;
}
<div class="container">
<div class="image"></div>
<div class="content">
<div class="text"> Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia corporis repudiandae Lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam aut
autem molestias debitis unde atque quam at assumenda. Atque sint illo rerum magnam aperiam suscipit commodi repudiandae officia! ipsum dolor sit, amet consectetur adipisicing elit. Fugiat quidem quasi sint culpa et rem quas deserunt labore laboriosam
mollitia. Consequatur lorem minus earum sint eius reiciendis, deleniti id vero sapiente. officiis consequuntur voluptas optio dolore nobis blanditiis adipisci maxime itaque ducimus sit incidunt, eveniet doloremque cupiditate debitis deserunt ad!
elit. Optio nihil officia commodi nostrum iure dignissimos officiis, consectetur, quae minus libero qui hic quis voluptas et quas similique vero neque facere. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores tenetur, veniam nobis
nulla molestiae recusandae quia a reiciendis corrupti exercitationem delectus iure ducimus ea odio animi cumque et optio eum! </div>
</div>
</div>
Since there is nothing that specifies the height on the <div class="image"></div>, it has a height of 0px. You could set the height to a certain value, like x vh or px,
but I would recommend using the img tag instead:
<img src="https://www.silocreativo.com/en/wp-content/uploads/2017/04/flexbox-cssgrid-practical-example.png"/> in place of <div class="image"></div>.
This way, the width and height are set to the dimensions of the actual image if nothing else is specified.
Your image tag has not an height specified, you need something like this to set the size of the div:
.image {
flex-basis: 200px; // or height: 200px;
}
Otherwise you can use the img tag instead of the background, so you can show the image at his correct dimensions. Remember to set height: auto to the img tag in this case.
A flex item needs either a height setting or content adding (which will determine the height). As the image div has no content or height its height is set to 0.
I don't recommend setting height on flex items as this is contrary to how flex works. You should set a height on the flex container and use flex-basis to set the height of your flex items.
This will allow your flex items to be responsive. If you want the image to have a fixed height you should set it's flex property to flex:0 0 <height>;
.container {
display: flex;
flex-direction: column;
background-color: black;
max-width: 700px;
margin: 20vh auto;
height: 400px;
}
.image {
display: flex;
background: url('https://www.silocreativo.com/en/wp-content/uploads/2017/04/flexbox-cssgrid-practical-example.png');
flex: 1;
}
.content {
flex: 1;
}
.text {
color: white;
}
<div class="container">
<div class="image"></div>
<div class="content">
<div class="text">Hey la bonbone est remplis de cocaine Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia corporis repudiandae Lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam aut
autem molestias debitis unde atque quam at assumenda. Atque sint illo rerum magnam aperiam suscipit commodi repudiandae officia! ipsum dolor sit, amet consectetur adipisicing elit. Fugiat quidem quasi sint culpa et rem quas deserunt labore laboriosam
mollitia. Consequatur lorem minus earum sint eius reiciendis, deleniti id vero sapiente. officiis consequuntur voluptas optio dolore nobis blanditiis adipisci maxime itaque ducimus sit incidunt, eveniet doloremque cupiditate debitis deserunt ad!
elit. Optio nihil officia commodi nostrum iure dignissimos officiis, consectetur, quae minus libero qui hic quis voluptas et quas similique vero neque facere. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores tenetur, veniam nobis
nulla molestiae recusandae quia a reiciendis corrupti exercitationem delectus iure ducimus ea odio animi cumque et optio eum! </div>
</div>
</div>
Sorry if its a dumb question but im making a ui thingy that I want to not get bigger when an item is added to it but also dont want change max-height
If you click on the button, a new element will be added. This does not change the size ("not make a div get bigger") of the div.
<div style="width:40px; max-height: 40px; overflow: auto; background: lightgreen">123 456 789 0 abc def xyz 123 456 789 0</div>
function myfunc(){
document.getElementById('mydiv').innerHTML += '<br>new_Item';
}
#mydiv {
width:100px;
max-height: 56px;
overflow: auto; /* or: hidden */
background: lightgreen
}
<div id="mydiv">123 456 789 0 abc def xyz 123 456 789 0</div>
<button onclick="myfunc()">Add item to div</button>
Maybe you need to use overflow on the div?
div {
overflow: scroll;
}
You can make use of overflow-y: scroll; with some extra CSS to the child. It will add child items only horizontally instead of breaking into a new line.
.container{
border: 1px solid red;
height: 100px;
overflow-y: scroll;
width: max-content;
}
.child{
max-width: 200px;
height: 100%;
display: inline-block;
border: 1px solid black;
vertical-align: top;
}
<div class="container">
<div class="child">I am first child</div>
<div class="child">I am second</div>
<div class="child">3rd</div>
<div class="child">Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro itaque ad ipsum fugit assumenda sit sapiente soluta modi! Veniam, </div>
<div class="child">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod iste hic nam odit cupiditate similique quia facilis, corporis fugit sit, reiciendis, explicabo sapiente. Minima aliquam dolore velit, eius non beatae?</div>
<div class="child">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod iste hic nam odit cupiditate similique quia facilis, corporis fugit sit, reiciendis, explicabo sapiente. Minima aliquam dolore velit, eius non beatae?</div>
<div class="child">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod iste hic nam odit cupiditate similique quia facilis, corporis fugit sit, reiciendis, explicabo sapiente. Minima aliquam dolore velit, eius non beatae?</div>
<div class="child">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod iste hic nam odit cupiditate similique quia facilis, corporis fugit sit, reiciendis, explicabo sapiente. Minima aliquam dolore velit, eius non beatae?</div>
<div class="child">I am not nth</div>
<div class="child">nth+1</div>
</div>
This question already has an answer here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Closed 4 years ago.
I'm making my first website and I want to make the tab bar to stick to the top of the screen and stay on screen when you scroll, but position:sticky doesn't seem to be doing this.
div#tabBar {
position: sticky;
top: 0;
display: flex;
flex-direction: row;
background-color: #29335C;
}
<div>
<div id="tabBar">
<a class="tabLinks">Home</a>
<a class="tabLinks">About Me</a>
</div>
<h1 id="homeFrame">Anna Grace</h1>
<div id="projectList"></div>
</div>
If you want it to the top of the screen, simply switch to position: fixed;
Position fixed is always relative to the upper left corner of the window, which is convinient in your case. Be aware that, because a fixed elenmet has no width, the content will start under/behind it. You might wat to give your body a padding top equal to the height of your header.
Position sticky works differently. It remains as a block/normal element until it's at the given top position, than it switches to fixed behaviour. Think like those advertisements that appear nexto content and stay where they are when you scroll down.
In your case the difference will be minimal, as the header start at 0, so it instanly switches to fixed,it just might behave a little more unpredictable.
it's works. I deleted parent div.
#tabBar{
position: sticky;
top:0;
background-color: #29335C;
display:flex;
flex-direction:row;
}
p {
font-size:36px;
}
<div id="tabBar">
<a class="tabLinks">Home</a>
<a class="tabLinks">About Me</a>
</div>
<div id="projectList"></div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus necessitatibus ad voluptates? Libero harum perspiciatis incidunt voluptatum aliquam magni facere officia debitis? Placeat, saepe dolores praesentium culpa a voluptate quia?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus necessitatibus ad voluptates? Libero harum perspiciatis incidunt voluptatum aliquam magni facere officia debitis? Placeat, saepe dolores praesentium culpa a voluptate quia?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel, deleniti blanditiis neque id libero, sit consectetur harum optio omnis dolorem quo laborum quaerat doloremque ullam corporis pariatur sunt excepturi maiores!</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Non neque error quod nam repellat placeat vitae odit, nulla a deserunt nostrum est nihil sed dicta accusamus molestiae recusandae modi saepe.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere eligendi quod accusamus dignissimos minus eum dolorum, commodi enim asperiores dicta nesciunt officiis praesentium quasi voluptas, explicabo sapiente neque atque perferendis!</p>
give outer div some height and the try. thanks
div#tabBar {
position: sticky;
top: 0;
display: flex;
flex-direction: row;
background-color: #29335C;
}
.outer{
height:1000px}
<div class="outer">
<div id="tabBar">
<a class="tabLinks">Home</a>
<a class="tabLinks">About Me</a>
</div>
<h1 id="homeFrame">Anna Grace</h1>
<div id="projectList"></div>
</div>
I'm trying to create a way to leak an element from it's parent container.
I'm using max-width and margin: auto for the container to center.
The child element has position: relative and uses left + translateX transform to become centered.
The CSS works OK until the page gets scrolling (content height higher than screen height).
This vertical scroll also generates horizontal scrolling.
I was able to hide it using overflow-x: hidden but i really want to know why i'm getting an horizontal scroll?
Maybe is because the transform? CODE BELOW (see in fullscreen):
.leaked {
position: relative;
left: 50%;
transform: translatex(-50%);
width: 100vw;
margin: 0;
overflow: hidden;
}
.container {
padding: 0 20px;
margin: 0 auto;
max-width: 960px;
position: relative;
}
/* EXTRA */
.block {
padding: 20px 0;
background: darkred;
color: white;
}
body {
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
}
figcaption {
text-align: center;
color: gray;
font-size: 0.8em;
}
.force-scroll {
height: 100vh;
}
<article class="container">
<header>
<h1>Article title</h1>
<small>To see in action, use and 1024px wide screen or larger</small>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
<figure class="leaked">
<img src="http://via.placeholder.com/1920x800" alt="Example figure" width="1920" height="800">
<figcaption>An example figure</figcaption>
</figure>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quis pariatur totam nostrum explicabo doloremque quaerat! Ipsum odit dolor ut corrupti hic quae provident voluptates saepe commodi, id culpa praesentium?</p>
<section class="leaked block">
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium doloribus aspernatur laboriosam! Voluptatem blanditiis doloremque earum ab alias, modi repudiandae eveniet autem fugiat facilis ducimus? Veniam laboriosam nobis ab!
</p>
</div>
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates voluptas eveniet suscipit fugiat. Quidem nesciunt ducimus veritatis, sed repudiandae perferendis nam fugiat! Laborum minus consequatur hic. Ut, dolorum facilis.</p>
<div class="force-scroll">This is only to force an scroll</div>
</article>
According to documentation
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they have scaled accordingly.
However, when the value of overflow on the root element is auto, any
scrollbars are assumed not to exist.
So there is no way to without js to get width without scrollbars :(
It's the width on .leaked. I changed the width from 100vw to 100% and the image reduces in size so it now fits in the container.
.leaked {
width: 100%;
//other styles
}
But if you do want the leaked content to go full width you need to change your html structure so .leaked sections are not inside the container, that way it will go full width:
<article class="container">
<header>
<h1>Article title</h1>
<small>To see in action, use and 1024px wide screen or larger</small>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
</article>
<figure class="leaked">
<img src="http://via.placeholder.com/1920x800" alt="Example figure" width="1920" height="800">
<figcaption>An example figure</figcaption>
</figure>
<article class="container">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quis pariatur totam nostrum explicabo doloremque quaerat! Ipsum odit dolor ut corrupti hic quae provident voluptates saepe commodi, id culpa praesentium?</p>
</article>
<section class="leaked block">
<div class="container">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium doloribus aspernatur laboriosam! Voluptatem blanditiis doloremque earum ab alias, modi repudiandae eveniet autem fugiat facilis ducimus? Veniam laboriosam nobis ab!
</p>
</div>
</section>
<article class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates voluptas eveniet suscipit fugiat. Quidem nesciunt ducimus veritatis, sed repudiandae perferendis nam fugiat! Laborum minus consequatur hic. Ut, dolorum facilis.</p>
<div class="force-scroll">This is only to force an scroll</div>
</article>