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>
Related
I'm aware of CSS Subgrid being able to solve a layout like this, but what I'm looking to achieve is a list of containers with content inside. The content inside the containers is aligned right in the containers, but all the content is aligned (left) to the longest content.
Is this possible with flex? Are there any strategies to achieve this?
I suppose the HTML structure would be something like:
<div class="container">
<div class="content" style="100px"></div>
</div>
<div class="container">
<div class="content" style="300px"></div>
</div>
<div class="container">
<div class="content" style="400px">All other content aligned to this longest content</div>
</div>
<div class="container">
<div class="content" style="200px"></div>
</div>
It is most definitely doable with flex.
What I've done is create 2 columns inside the .container element. Column 2 will be right aligned inside the container, and your .content will be left aligned inside .column2.
All you need to do to adjust the alignment of the content inside the containers, is to play around with the widths of .column1 and .column2 in the snippet below:
* {
font-family: sans-serif;
}
.container {
display: flex;
background: lightgray;
align-items: center;
border-radius: 5px;
margin-bottom: 10px;
padding: 7px;
}
.content {
display: flex;
align-items: center;
padding: 0 10px;
background: #666;
border-radius: 5px;
color: white;
height: 50px;
}
.column1 {
width: 30%;
}
.column2 {
width: 70%;
}
<div class="container">
<div class="column1">Container</div>
<div class="column2">
<div class="content" style="width: 100px"></div>
</div>
</div>
<div class="container">
<div class="column1">Container</div>
<div class="content" style="width: 250px"></div>
</div>
</div>
<div class="container">
<div class="column1">Container</div>
<div class="column2">
<div class="content">All other content aligned to this longest content</div>
</div>
</div>
<div class="container">
<div class="column1">Container</div>
<div class="column2">
<div class="content" style="width: 200px"></div>
</div>
</div>
I have an image inside a div with a class of col-md-6 and I'm trying to position text next to the image right in the middle. What code works for that? The only way I've found possible, but not accurate is by messing with the padding.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#wrapper2 h1 {
text-align: center
}
#wrapper2 p {
text-align: center;
}
.col-md-6 {
padding: 0;
}
<div class="container-fluid">
<div id="wrapper2">
<div class="row">
<div class="col-md-6">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/47/3d/e8/473de83da9ad0e72e340022bb68e9429.jpg>
</div>
<div class="col-md-6">
<h1>Men's Line</h1>
<p>Shop our newest 2017 arrivals</p>
</div>
</div>
</div>
</div>
https://jsfiddle.net/u5qngm5q/
You need to define your own custom column css class and set its display to table-cell. Finally, make vertical-align and text-align properties to middle.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#wrapper2 h1 {
text-align: center
}
#wrapper2 p {
text-align: center;
}
.col-md-6 {
padding: 0;
}
.custom-column{
display:table-cell;
height:100%;
width:50%;
vertical-align:middle;
text-align:center
}
<div class="container-fluid">
<div id="wrapper2">
<div class="row">
<div class="custom-column">
<img class="img-responsive" src=https://s-media-cache-ak0.pinimg.com/736x/47/3d/e8/473de83da9ad0e72e340022bb68e9429.jpg>
</div>
<div class="custom-column">
<h1>Men's Line</h1>
<p>Shop our newest 2017 arrivals</p>
</div>
</div>
</div>
</div>
Adding display: flex; and align-items: center; to the .row class will have this effect. Also adding flex-wrap: wrap; will make the code responsive. Then add flex-grow:1; to your text container for centering the text in mobile view Fiddle
HTML
<div class="row flex-center">
<div class="col-md-6 text-container">
<h1>Men's Line</h1>
<p>Shop our newest 2017 arrivals</p>
</div>
</div>
CSS
.flex-center {
align-items: center;
display: flex;
flex-wrap: wrap;
}
.text-container {
flex-grow : 1;
}
I used the styling from this thread to make a progress bar fill in the empty space in a div (only other item is a button).
The problem is now that align-items: center doesn't vertically center the progress bar. I tried using align-content: center on the child too, with no effect.
Here's the code in case you didn't open the link
.wrapper {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 5em;
background: #ccc;
}
.wrapper > .left
{
background: #fcc;
}
.wrapper > .right
{
background: #ccf;
flex: 1;
}
Markup:
<div class="wrapper">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
Can someone tell me what I'm doing wrong? Thanks in advance
This is how it looks:
I guess you can do the following to get it right:
There is a margin coming for the .progress element- first you can nullify it:
.wrapper > .left > .progress {
margin: 0;
}
Give 100% height for wrapper
I also removed height: 10vh for the container of wrapper to finish things up.
See revised fiddle here and snippet below:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.wrapper {
display: flex;
align-items: center;
width: 100%;
background: #ccc;
height: 100%;
}
.wrapper > .left {
background: #fcc;
flex: 1;
}
.wrapper > .right {
background: #ccf;
}
.wrapper > .left > .progress {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-s-6 col-s-offset-3" style="background:purple; position:relative; border-radius:10px;">
<div class="wrapper">
<div class="left">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width:35%">
</div>
</div>
</div>
<div class="right">
<button type="button" aside-menu-toggle="menu-1" class="btn btn-sm btn-default">Меню</button>
</div>
</div>
</div>
</div>
</div>
Let me know your feedback on this. Thanks!
A flex container will enable a flex context only to its direct children. Hence, your "progress-bar" div is out of reach. Likewise, your purple background bar is before flex container (wrapper), so don't expect it's content to be centered either. You can check this guide.
Check this code:
<div class="container">
<div class="row">
<div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-s-6 col-s-offset-3" style="background:purple; height:10vh; position:relative; border-radius:10px;">
<div class="wrapper">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
</div>
</div>
</div>
Pen based on your code here
Try adding
align-items: center;
justify-content: center;
to your .wrapper class.
Here is a good article on FlexBox positioning:
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
i'm trying to wrap the content and a vertical bar.
right now when the Viewport increate the Content and the Bar move away from each other (the Bar to the right and the Content to the left)
But i want them to Seperate to a specific amount and stay like that.
This is my Screendesign:
enter image description here
And that would be my Code right now:
<!DOCTYPE HTML>
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="navhm">
</div>
<div id="space">
</div>
<div id="wrapperres">
<div id="pfosten">
</div>
<div id="contwrap">
<div id="content">
<p>Lorem Ipsum</p>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
And thats my CSS
http://codepen.io/Blackcan/pen/AXovrL
Any Advices are welcome!
I would use flexbox for this.
Let's say your HTML looks like this:
<div class="container">
<div class="content-left">
<div class="nav-fixed">
</div>
<div class="content">
</div>
</div>
<div class="social-media">
</div>
</div>
Then you could use in your CSS:
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.content-left {
flex: 0 0 60vw;
overflow-y: scroll;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.social-media {
flex: 0 0 20vw;
}
.nav-fixed {
flex: 0 0 40px;
}
.content {
flex: 0 0 300px;
}
Codepen: https://codepen.io/J-DD/pen/QErjLE
More about flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
http://thenewcode.com/780/A-Designers-Guide-To-Flexbox
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.