.header {
display: flex
}
.logo,
.contribute,
.class 1,
.class 2 {
display: inline-block;
margin: auto 0;
}
<header class="header">
<div class="logo">
</div>
<nav </nav>
<div class="contribute">
</div>
<div class="class 1">
</div>
<div class="class 2">
</div>
</header>
In this suppose .header has display: flex; set.
.logo, .contributor, .class 1, .class 2 has display: inline-block; set and are child to parent .header class, which is flex.
How can we make sure that the .class 1 and .class 2 are right aligned without using the flow property?
Use margin-left: auto; for class1
div,
nav {
display: inline-block;
}
.header {
display: flex;
justify-content: space-between;
}
<header class="header">
<div class="left">
<div class="logo">1</div>
<nav></nav>
</div>
<div class="contribute">2</div>
<div class="right">
<div class="class1">3</div>
<div class="class2">4</div>
</div>
</header>
Simply add margin-left: auto; to .class1 and it will push itself and .class2 to the right
I fixed your class names as CSS isn't happy with a class name of only one digit, like the 1 in class 1, so either remove the space (which I did in below sample) or add i.e. nr (nr1). Also, as the items in a flex container is flex items, the display: inline-block will have no effect.
.header {
display: flex
}
.class1 {
margin-left: auto;
}
<header class="header">
<div class="logo">
logo
</div>
<nav>
</nav>
<div class="contribute">contribute
</div>
<div class="class1">class 1
</div>
<div class="class2">class 2
</div>
</header>
Related
Working on flexboxes and I'm unable to get my Awesome Logo header to fall underneath the very top menu which includes the date, login, etc
How it should look:
Actual Image
How my layout is:
My Funky Garbage
I'm assuming it's something with the formatting of my divs from my .html because after placing the header-container and head classes around differently, the header moves :(
html code:
<body>
<div class='menu-container'>
<div class='header-container'>
<div class='header'>
<div class='subscribe'>Subscribe ▾</div>
<div class='logo'><img src='images/awesome-logo.svg'/></div>
<div class='social'><img src='images/social-icons.svg'/></div>
</div>
</div>
<div class='menu'>
<div class='date'>Feb 7, 2023</div>
<div class="links">
<div class='signup'>Sign Up</div>
<div class='login'>Login</div>
</div>
</div>
</body>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.menu-container {
color: #fff;
background-color: #5995da;
padding: 20px;
display: flex;
justify-content: center;
}
.menu {
width: 900px;
display: flex;
justify-content: space-between;
}
.links {
display: flex;
justify-content: flex-end;
}
.login {
margin-left: 20px;
}
.header-container {
color: #5995DA;
background-color: #D6E9FE;
display: flex;
justify-content: center;
}
.header {
width: 900px;
height: 300px;
display: flex;
align-items: center;
justify-content: space-between;
}
I'm on the cross axis section of this website: https://www.internetingishard.com/html-and-css/flexbox/
Thanks!
Try adding flex-direction: column-reverse; to .menu-container.
For cleaner code you can also get rid of .header-container and add its css properties to header, change the order of the menu and header divs, and use flex-direction: column;. Like the code below.
<body>
<div class='menu-container'>
<div class='menu'>
<div class='date'>Feb 7, 2023</div>
<div class="links">
<div class='signup'>Sign Up</div>
<div class='login'>Login</div>
</div>
<div class='header'>
<div class='subscribe'>Subscribe ▾</div>
<div class='logo'><img src='images/awesome-logo.svg'/></div>
<div class='social'><img src='images/social-icons.svg'/>
</div>
</div>
</body>
You should move your .header-container out of .menu-container, so they're sibling elements. If needed, create a wrapper for them.
Your .links div is also unclosed, which might be causing you issues.
So your HTML should look something like this:
<body>
<div class='menu-container'>
<div class='menu'>
<div class='date'>Feb 7, 2023</div>
<div class="links">
<div class='signup'>Sign Up</div>
<div class='login'>Login</div>
</div>
</div>
</div>
<div class='header-container'>
<div class='header'>
<div class='subscribe'>Subscribe ▾</div>
<div class='logo'><img src='images/awesome-logo.svg'/></div>
<div class='social'><img src='images/social-icons.svg'/></div>
</div>
</div>
</body>
Trying to put one div on the right side, other one on the left.
I have 1 div with 2 divs inside.
float: right to parent div and text/image.
<div class="navigation">
<div class="left">
<img src="Logo.png" id="logoImage">
<h1>TWITCHBOOK</h1>
</div>
<div class="right">
<h3>Luka Crypto</h3>
<div id="circle"></div>
</div>
</div>
Codepen: https://codepen.io/Cryptooo/pen/rXGdoP
Two divs on opposite sides.
You can achieve this by styling .navigation as a flexbox with justify-content: space-between;:
.navigation {
display: flex;
justify-content: space-between;
}
.left {
background: red;
}
.right {
background: blue;
}
<div class="navigation">
<div class="left">
<img src="Logo.png" id="logoImage">
<h1>TWITCHBOOK</h1>
</div>
<div class="right">
<h3>Luka Crypto</h3>
<div id="circle"></div>
</div>
</div>
From your codepen, the .navigation element is a flex container. So, remove the float: right on the .right element and add margin-left: auto to "push" it over to the right side.
.right {
display: flex;
align-items: center;
margin-left: auto;
}
This is recommended from the flexbox spec in Aligning with auto margins
.left {
float: left;
}
.right {
float: right;
}
<div>
<div class="left">
<h3>TWITCHBOOK</h3>
</div>
<div class="right">
<h3>Luka Crypto</h3>
</div>
</div>
I have three divs in a row next to each other. They have the same class and same structure, but their content is different, particularly in length.
My problem is, that all three divs take the height of the one with the "longest" content instead of adjusting to their individual content.
Here's my HTML:
<main class="content">
<div class="column last-match">
<div class="image-wrapper">
<img src="default_thumbnail.jpg"/>
</div>
<div class="text-wrapper">
<a class="heading" href="#"><p class="heading">A Heading</p></a>
<p class="post-excerpt">Some text</p>
Read More
</div>
</div>
<div class="column last-match">
<div class="image-wrapper">
<img src="default_thumbnail.jpg"/>
</div>
<div class="text-wrapper">
<a class="heading" href="#"><p class="heading">A Heading</p></a>
<p class="post-excerpt">Some text that's longer</p>
Read More
</div>
</div>
<div class="column next-matches">
<div class="image-wrapper">
<img src="next_matches.jpg"/>
</div>
<div class="text-wrapper">
<p class="heading">List Heading</p>
<ul class="match-list">
<li class="match">some list item</li>
<li class="match">some list item</li>
</ul>
</div>
</div>
</main>
And the basic CSS:
.content {
display: flex;
flex-wrap: nowrap;
}
.column {
display: flex;
flex-direction: column;
margin: 60px 20px;
min-height: 100px;
width: 33%;
}
.image-wrapper {
width: 100%;
height: 260px;
overflow: hidden;
}
.image-wrapper img {
width: 100%;
height: auto;
}
.post-excerpt {
margin-bottom: 20px;
}
.button {
display: block;
float: left;
margin-bottom: 20px;
padding: 10px;
}
.match {
font-size: 1em;
padding-top: 15px;
}
Here's my code on JSFiddle: https://jsfiddle.net/4h0g73sp/5/
As you will see, the columns will take the height of the one with the most text in it. What I want is them to adjust to their content, so that they have different heights if necessary.
I don't know if it's noteworthy, that I'm working with Wordpress, so these columns are originally inside of some php. If that's important I'm happy to share the code with you, so let me know :)
The issue is because align-items on the flex container defaults to stretch so the flex items takes the height (rows) of the tallest item.
Simply set it to flex-start
.content {
display: flex;
align-items: flex-start;
}
https://jsfiddle.net/4h0g73sp/9/
I have also removed flex-wrap from .content because the default is no wrap so there is no need to declare it
Check https://css-tricks.com/snippets/css/a-guide-to-flexbox/ it's very useful and demonstrates flex fairly well
I am trying to use CSS sibling selectors but seems that they are not working as per rule.
Basically, i am using panel from bootstrap and trying to change panel-heading css via rules.
I have created a similar markup to replicate the issue and Below is the JS Fiddle link for same
Link to JS Fiddle
I have also tried with below css:
.collpase + .heading{
opacity: 0.2
}
.collpase.in + .heading{
opacity: 1
}
Any ideas?
Since one can't select a previous sibling, one can use flexbox to achieve that effect by have one order in markup and another visual rendered.
Here I used flex, switched order in markup and again, visually, using flexbox property order
Now both the CSS sibling selectors ~/+ will work as they target the next sibling in the markup.
.heading {
color: #fff;
background: #000;
padding: 5px;
margin: 5px;
}
.collapse {
padding: 5px;
display: none;
order: 2 /* added property */
}
.collapse.in {
display: block;
}
.flex { /* added rule */
display: flex;
flex-direction: column;
}
.collapse ~ .heading { /* "collapse" was misspelled */
opacity: 0.2;
}
.collapse.in ~ .heading { /* "collapse" was misspelled */
opacity: 1;
}
<div class="parent">
<div class="firstChild flex">
<div class="collapse in">
Content
</div>
<div class="heading">
STep 1
</div>
</div>
<div class="secondChild flex">
<div class="collapse">
Content
</div>
<div class="heading">
STep 2
</div>
</div>
<div class="thirdChild flex">
<div class="collapse">
Content
</div>
<div class="heading">
STep 3
</div>
</div>
<div class="fourthChild flex">
<div class="collapse">
Content
</div>
<div class="heading">
STep 4
</div>
</div>
</div>
For older browsers, display: table can be used
.heading {
color: #fff;
background: #000;
padding: 5px;
margin: 5px;
}
.collapse {
padding: 5px;
display: none;
}
.collapse.in {
display: table-footer-group; /* changed property */
}
.child { /* added rule */
display: table;
}
.collapse ~ .heading { /* "collapse" was misspelled */
opacity: 0.2;
}
.collapse.in ~ .heading { /* "collapse" was misspelled */
opacity: 1;
}
<div class="parent">
<div class="first child">
<div class="collapse in">
Content
</div>
<div class="heading">
STep 1
</div>
</div>
<div class="second child">
<div class="collapse">
Content
</div>
<div class="heading">
STep 2
</div>
</div>
<div class="third child">
<div class="collapse">
Content
</div>
<div class="heading">
STep 3
</div>
</div>
<div class="fourth child">
<div class="collapse">
Content
</div>
<div class="heading">
STep 4
</div>
</div>
</div>
I am trying to use Flexbox on an existing site, and I need to somehow tell the browser to "skip" several divs in the tree.
Let me explain on a simplified example. I have a HTML like this
<body style="display: flex;
min-height: 100vh;
flex-direction: column;">
<div id="want_to_skip">
<div style="flex: 1;">
</div>
<div id="footer"></div>
</div>
</body>
and I want it to behave as it was like this
<body style="display: flex;
min-height: 100vh;
flex-direction: column;">
<div style="flex: 1;">
</div>
<div id="footer"></div>
</body>
Unfortunately, I need the "skipped" div to be there and cannot remove it. What should I do?
CSS Display L3 introduces display: contents:
The element itself does not generate any boxes, but its children and
pseudo-elements still generate boxes as normal. For the purposes of
box generation and layout, the element must be treated as if it had
been replaced with its children and pseudo-elements in the document
tree.
#want_to_skip {
display: contents;
}
body {
display: flex;
margin: 0;
}
body > div {
flex: 1;
}
.wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
border: 1px solid;
}
.top {
flex: 1;
}
.want_to_skip {
display: contents;
}
<div>
<div class="wrapper">
<div>
<div class="top"> No skipping - Top </div>
<div class="bottom">No skipping - Bottom</div>
</div>
</div>
</div>
<div>
<div class="wrapper">
<div class="want_to_skip">
<div class="top"> Skipping - Top </div>
<div class="bottom">Skipping - Bottom</div>
</div>
</div>
</div>
<div>
<div class="wrapper">
<div class="top"> Desired - Top </div>
<div class="bottom">Desired - Bottom</div>
</div>
</div>
Currently, it is only supported by Firefox 37.