I would like to have a layout as follows:
Whereby I have a parent container, and centred inside of that is a breadcrumb. However, I also would like a logo inside of the container which floats to the left of the breadcrumb, but respects the boundaries of the breadcrumb.
I have been playing around with flexbox and can only get it to work with absolutely positioning the logo, which means the breadcrumb does not respect the boundaries of the logo.
I have put together a JSFiddle playground here: https://jsfiddle.net/joyqwpc1/25/.
The difficult thing is, the logo can be a variable width, so setting a margin is not viable for this.
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
padding: 0 50px;
}
#logo {
height: 50px;
width: 50px;
background-color: blue;
position: absolute;
left: 0;
}
#breadcrumb {
width: 200px;
height: 20px;
background-color: green;
}
<div id="container">
<div id="logo"></div>
<div id="breadcrumb"></div>
</div>
I've created 2 separate containers for the logo and breadcrumbs and set them a width. Then, I aligned elements inside these containers.
https://jsfiddle.net/dmitriifrlv/vbhxrj1u/39/
<div id="container">
<div class="logoContainer">
<div id="logo">
</div>
</div>
<div class="breadcrumbContainer">
<div id="breadcrumb">
</div>
</div>
</div>
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
}
.logoContainer{
width: 10%;
height: 100%;
background: yellow;
}
#logo {
height: 50px;
width: 100%;
background-color: blue;
}
.breadcrumbContainer{
width:90%;
display: flex;
justify-content: center;
}
#breadcrumb {
width: 200px;
max-width: calc(100% - 2rem);
height: 20px;
background-color: green;
}
For clean solution a little bit of JavaScript is needed:
Make sure to click "Run with JS" button: https://jsbin.com/ziziqidole/edit?html,output
<html>
<head>
<script>
function handleResize() {
var crumb = document.getElementById("breadcrumb");
var logoWidth = document.getElementById("logo").offsetWidth;
var calcWidth = (window.innerWidth - crumb.offsetWidth) / 2 - logoWidth;
if (calcWidth < 10) {
calcWidth = 10;
}
crumb.style.marginLeft = calcWidth;
}
</script>
<style media="all">
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
height: 50px;
padding-right: 50px;
}
#logo {
height: 50px;
width: 150px;
background-color: blue;
flex-shrink: 0;
}
#breadcrumb {
width: 200px;
height: 20px;
background-color: green;
}
#center {
width: 200px;
height: 20px;
margin: 0 auto;
background-color: khaki;
text-align: center;
}
</style></head
>
<body onresize="handleResize()" onload="handleResize()">
<div id="container">
<div id="logo"></div>
<div id="breadcrumb"></div>
</div>
<div id="center">Page Center</div>
</body>
</html>
Solution without JavaScript. But some hardcoding needed e.g. logo width and crumb width.
https://jsbin.com/juxijowova/edit?html,output
<html>
<head>
<style media="all">
body {
margin: 0;
}
#container {
background: red;
display: flex;
align-items: center;
height: 50px;
padding-right: 50px;
}
#logo {
height: 50px;
width: 150px;
background-color: blue;
flex-shrink: 0;
}
#breadcrumb {
width: 200px;
height: 20px;
background-color: green;
position: absolute;
left: max(260px, 50%); /* logo width + breadcrumb width/2 + margin*/
transform: translate(-50%, 0);
/*margin: 0 auto;
margin-left: 10px;/*use this if want to center on remaining area instead of screen center*/
}
#center {
width: 200px;
height: 20px;
margin: 0 auto;
background-color: khaki;
text-align: center;
}
</style></head
>
<body>
<div id="container">
<div id="logo"></div>
<div id="breadcrumb"></div>
</div>
<div id="center">Page Center</div>
</body>
</html>
This is usually how I lay something like this out: 3 containers, the side 2 will flex to fill space equally because they have the same exact basis (auto basis would break this because the left "Logo" content would be included in the basis for the left container). The middle is sized to the content and stays centered unless it becomes too wide and will start to take up space on the right and become uncentered.
.f-row {
display: flex;
}
.left-box {
flex: 1 1 0.0000001px;
padding: 1em;
border: 1px solid blue;
}
.middle-box {
padding: 1em;
border: 1px solid red;
justify-self: center
}
.right-box {
padding: 1em;
border: 1px solid green;
flex: 1 0 0.0000001px;
}
<div class="f-row">
<div class="left-box">Logo</div>
<div class="middle-box">Breadcrumb</div>
<div class="right-box"></div>
</div>
<br><br>
<div class="f-row">
<div class="left-box">Logo</div>
<div class="middle-box">Breadcrumb > Longer > Space</div>
<div class="right-box"></div>
</div>
<br><br>
<div class="f-row">
<div class="left-box">Logo</div>
<div class="middle-box">Breadcrumb > Longer > Space > Too Much Now It's Taking Up Space From the Right, Uncentered Now</div>
<div class="right-box"></div>
</div>
Related
I've a simple DIV-Container for the main-content of the webpage. I.E
#main { width: 50%; margin: 0 auto; }
Now I would like to fix another container, right and fixed at the top of the #main-Container. See Screenshot:
You can do something like the following using CSS Flex:
.flex-container {
display: flex;
width: calc(66.66% - 20px);
float: right;
}
.main {
flex: 1;
color: white;
text-align: center;
margin-right: 33.33%;
}
.main:first-child {
width: 50%;
margin: 0 auto;
margin-right: 10px;
}
.red {
background-color: red;
height: 200px;
line-height: 200px;
}
.green {
background-color: green;
height: 100px;
line-height: 100px;
max-width: 15%;
}
<div class="flex-container">
<div class="main red">
Main content
</div>
<div class="main green">
?
</div>
</div>
Add the green div inside the centered div and style it.
<div id="main" style="position:relative;">
<div id="green_div" style="position:absolute; left:100%; margin-left:20px; background:green;">
<div>
</div>
My goal: A responsive navbar where the logo is always in the middle and an element
is always on the left. Depending on the context (page dependent), buttons can be
displayed in the right area or not.
My approach: I use a flexbox for the navbar. I have three divs in the flexbox. I have given all divs a fixed width. The middle box is also a flexbox. The div with a logo is located there. I position the logo on the right edge of the middle flexbox. The div with the logo has a fixed width (80px).
The problem: The approach works but I don't find this way very nice. Because the widths are dependent on each other. If you would change the logo and it would be wider or narrower then you would have to adjust the relative width of the middle and right box. The second problem is if the device smaller as 900px then this solution dont work.
Question: What other possibilities are there and what possibilities would resolve this "width" dependency?
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
header {
height: 80px;
display: flex;
justify-content:space-between;
}
.header-left {
width:20%;
background: green;
}
.header-middle {
width:34%;
background: gray;
display: flex;
justify-content:flex-end;
}
.header-right {
width:46%;
background: green;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;font-size:70px;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
</div>
</div>
You can use flex-grow: 1 on the left and right elements, the middle element will be in center naturally. In this case, you don't need to set widths on elements.
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
header {
height: 80px;
display: flex;
justify-content:space-between;
}
.header-left {
flex-grow: 1;
background: green;
}
.header-middle {
background: gray;
display: flex;
justify-content:flex-end;
}
.header-right {
flex-grow: 1;
background: green;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;font-size:70px;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div style="width:50%; background: black;color:white; text-align:center;">Controller Div 50%</div>
</div>
</div>
Since you're looking for different possibilities i'll suggest you to take the approch used by Tepken Vannkorn :
Centering brand logo in Bootstrap Navbar
Based on your comments, I would suggest the following code as a simple solution.
I have added a max-width value to your .logo CSS class and I have also moved your inline CSS from the front-end code, and created a .controller CSS class for it.
#app {
margin: 0 auto;
max-width: 900px;
width: 100%;
}
header {
height: 80px;
display: flex;
justify-content: space-between;
}
.header-left {
width: 20%;
background: green;
}
.header-middle {
width: 34%;
background: gray;
display: flex;
justify-content: flex-end;
}
.header-right {
width: 46%;
background: green;
}
.logo {
background-color: red;
width: 80px;
height: 80px;
text-align: center;
font-size: 70px;
max-width: 80px;
}
.controller {
width: 50%;
background: black;
color: white;
text-align: center;
}
<div id="app">
<small>width: 900px</small>
<header>
<div class="header-left">Burger Menu</div>
<div class="header-middle">
<div class="logo">
I
</div>
</div>
<div class="header-right">Context Buttons</div>
</header>
<div>
<div class="controller">Controller Div 50%</div>
</div>
</div>
A solution would be to use a mix of flex and position: absolute. Then you need only the left and the right container. the logo you can center with position left: left: calc(50% - calc(80px / 2));. The 80px is the width from your logo.
* {
margin: 0;
padding: 0;
}
#app {
margin: 0 auto;
max-width: 900px;
width:100%;
}
.header {
display: flex;
justify-content: space-between;
height: 80px;
background: yellow;
position: relative;
}
.header-left {
background-color: green;
width: 20%
}
.header-right {
background-color: green;
width: 44%;
}
.logo {
background-color: red;
width:80px;
height: 80px;
text-align:center;
font-size:70px;
position: absolute;
left: calc(50% - calc(80px / 2));
}
<div id="app">
<div class="header">
<div class="header-left">left</div>
<div class="logo">X</div>
<div class="header-right">right</div>
</div>
<div style="width:50%; background: black;">Controller Div 50%</div>
</div>
I have a fixed width element that needs to be centered when it fits on the page but if not then extend beyond the page width accessible with page scroll. I've got close to making this work but it overlaps the sidebar.
1/ How can I centre the large-fixed-grid (green element) if it fits inside the container/screen width but if not start it from after the sidebar?
2/ Additionally, if I scroll horizontally to show the fixed width element, the top-header shows a gap with difference between screen width and large-fixed-grid width (red element). Is there a way to offset the top-header inline with the scrolling horizontally so there is no white gap?
The yellow element should still be centred on the original width without scrolling. It currently behaves as expected.
I have tried lots of CSS variations but cannot get this working.
JSFiddle: https://jsfiddle.net/7tg2jo69/
Image:
Html:
<!DOCTYPE html>
<html>
<header class="top-header"></header>
<div class="page">
<div class="sidebar">
<div class="menu">Item1</div>
</div>
<main class="main">
<article class="content">
<div class="container">
<div class="row justify-content-center">
<div class="small-flexible-grid">
</div>
<div class="large-fixed-grid">
</div>
</div>
</div>
</article>
</main>
</div>
</html>
CSS:
.top-header {
height: 40px;
background:red;
}
.sidebar {
z-index: -1;
background:blue;
float: left;
width: 200px;
height: calc(100vh - 3.5rem);
position: sticky;
top: 0;
overflow-y: auto;
}
.main {
margin-left: 200px;
}
.content {
padding: 1.1rem;
}
.container {
max-width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
}
.justify-content-center {
justify-content: center;
}
.small-flexible-grid {
background: yellow;
width: 60%;
height: 100px;
}
.large-fixed-grid {
background: green;
min-width:600px;
width: 600px;
height: 100px;
}
Update:
I've fixed 1/ by removing class justify-content-center entirely and adding margin: auto; to both .small-flexible-grid and .large-fixed-grid
how about change the styles to
.large-fixed-grid {
background: green;
width: 100%;
max-width: 600px;
height: 100px;
}
Solved both of these using the following
JSFiddle: https://jsfiddle.net/m9wdzgb1/
Html:
<!DOCTYPE html>
<html>
<header id="top-header-onscroll" class="top-header"></header>
<div class="page">
<div class="sidebar">
<div class="menu">Item1</div>
</div>
<main class="main">
<article class="content">
<div class="container">
<div class="row">
<div class="small-flexible-grid">
</div>
<div class="large-fixed-grid">
</div>
</div>
</div>
</article>
</main>
</div>
</html>
CSS:
.top-header {
height: 40px;
background:red;
}
.sidebar {
z-index: -1;
background:blue;
float: left;
width: 200px;
height: calc(100vh - 3.5rem);
position: sticky;
top: 0;
overflow-y: auto;
}
.main {
margin-left: 200px;
}
.content {
padding: 1.1rem;
}
.container {
max-width: 100%;
}
.row {
display: flex;
flex-wrap: wrap;
}
.small-flexible-grid {
background: yellow;
width: 60%;
margin: auto;
height: 100px;
}
.large-fixed-grid {
background: green;
min-width:600px;
width: 600px;
margin: auto;
height: 100px;
}
Javascript:
window.onscroll = function (e) {
var top_header = document.getElementById('top-header-onscroll');
if (top_header) {
if (window.pageXOffset > 0) {
top_header.style.width = (window.innerWidth + window.pageXOffset - 30) + 'px';
}
else {
top_header.style.width = "";
}
}
}
I have a current issue in my current project, where i have an area in which i want to center some text. This text can be different from each use of the area.
This part i have fully understood, but i want to place another piece of text, exactly in the center of the remaining space between the end of the first text and the end of the area.
How would i structure my css and html to make this possible?
The image below should help display what it is, that i want to do:
html,
body {
height: 100%;
text-align: center;
}
#left {
width: 200px;
display: inline-block;
background: #f00;
height: 200px;
justify-content: center;
}
#right {
display: inline-block;
background: #0f0;
height: 200px;
}
<div id="left">
CONTENT
</div>
<div id="right">
Other content
</div>
Edit:
Sorry about not including code
An attempt i took: http://jsfiddle.net/5jRaY/298/
I get the red block to fit as wanted, other than the div should wrap the container. My issue is that i can't get the green box to fill the remaining space of the page.
You can try a different layout. This is what I will use:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrapper {
display: table;
width: 100%;
text-align: center;
}
#one,
#two,
#three {
display: table-cell;
width: 33.333%;
}
#one {
width: 200px;
height: 200px;
background: white; /*Change color to see it*/
}
#two {
background: red;
height: 200px;
}
#three {
height: 200px;
background: green;
}
<div id="wrapper">
<div id="one"></div>
<div id="two">CONTENT</div>
<div id="three">Other content</div>
</div>
Let me know if it works for you!
Hope this helps:
#container {
height: 200px;
text-align: center;
position: relative;
}
#left {
width: 200px;
margin: auto;
height: 100%;
background: #f00;
}
#right {
top: 0;
right: 0;
bottom: 0;
background: #0f0;
position: absolute;
width: calc(50% - 100px); /* 100px is 50% of #left */
}
<div id="container">
<div id="left">
CONTENT
</div>
<div id="right">
Other content
</div>
</div>
I have 3 divs (colored squares) and a button.
How can I center the button under the divs?
With my current code the button appears in the same line as #squares and it's floating to the left. Thanks for your answers.
#div1 {
background-color: red;
width: 100px;
height: 100px;
margin-right: 10px;
}
#div2 {
background-color: green;
width: 100px;
height: 100px;
margin-right: 10px;
}
#div3 {
background-color: blue;
width: 100px;
height: 100px;
}
#squares {
display: flex;
position: absolute;
margin-left: 35%;
}
#button {
width: 100px;
height: 50px;
clear: both;
}
<div id="squares">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<div id="button">
<button>Click me!</button>
</div>
Since you're already using flexbox, there are multiple solutions, all of them relatively simple.
Here's one:
Wrap both containers in a parent container.
Add display: flex and flex-direction: column to this new container.
Now you can easily align the squares and the button both vertically and horizontally.
#container {
display: flex;
flex-direction: column;
}
#div1 {
background-color: red;
width: 100px;
height: 100px;
}
#div2 {
background-color: green;
width: 100px;
height: 100px;
margin: 0 10px;
}
#div3 {
background-color: blue;
width: 100px;
height: 100px;
}
#squares {
display: flex;
align-self: center;
margin-bottom: 10px;
}
#button {
align-self: center;
text-align: center;
width: 100px;
height: 50px;
}
<div id="container">
<div id="squares">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<div id="button">
<button>Click me!</button>
</div>
</div>
Is there a specific reason you are using position: absolute for the square-container?
If not, you can just make the position relative, recenter the content and center the button.
Important code changes:
#squares {
position: relative;
justify-content: center;
}
#button {
margin: 0 auto;
}
Fiddle: https://jsfiddle.net/q17fa25w/
Other way to solve it, you can set padding left and top for #button div like this:
#button {
width: 100px;
height: 50px;
clear: both;
padding: 120px 35%;
}