Develop Reference

Why does my page width only stretch to 100% with "fit-content"?

I have tried looking around for this but can't seem to find a question to match my current problem. I am trying to build a mock ecommerce website to practice using React. I have a header component. I want this component to be 100% of the screen width, so that the elements inside this component shrink whenever the page shrinks. I have some global css that sets the height and width of the html and body to 100%:
html, body{
background-color: rgb(167, 72, 72);
height: 100%;
min-width: 100%;
}
I am currently facing two problems, neither of which I understand very well the causes of. When I set my header component (the outermost component) to have a width of 100%, the page shrinks correctly. But when I open up developer tools to check the responsiveness, something goes wrong so that the right side of my header is shrinking faster than the page header_shrink
I am able to fix this by setting the width of my header to "fit-content" instead of "100%". Here is what the header looks like when I shrink the page using developer tools.header_fixed But when I do it this way, the components inside of my header don't shrink correctly. For example, my search bar is supposed to decrease in width as I shrink the page, but when I use "fit-content", it just stays set to whatever size it is. search-bar-constant. When I have the width set to 100% instead of fit content, it looks the way it's supposed to search-bar-fixed.
Sorry for the long explanation, but this is the bulk of my problem. "Width: 100%" allows the items in my header component to shrink correctly, but not the component itself. And "width: fit-content" allows the outer header component to shrink correctly, but not the items inside of it.
Here is the JSX I have for reference:
import React from 'react'
import './Header.css'
import { BiSearchAlt2 as SearchIcon} from "react-icons/bi";
import {RiArrowDropDownLine as DropDownIcon} from "react-icons/ri";
import { CgProfile as Profile } from "react-icons/cg";
import { CgShoppingCart as Cart } from "react-icons/cg";
const Header = () => {
const texts = [
'ORDERS OF $5K SHIP FREE',
'FREE SHIPPING ON SELECT ITEMS: SHOP NOW',
'BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE'
];
let currentTextIndex = 0;
setInterval(() => {
const shippingDealsText = document.querySelector('.shipping-deals-text');
shippingDealsText.classList.add('out');
setTimeout(() => {
shippingDealsText.textContent = texts[currentTextIndex];
shippingDealsText.classList.remove('out');
currentTextIndex = (currentTextIndex + 1) % texts.length;
}, 1000);
}, 5000);
return (
<div className="header">
<div className="header-top">
<div className="top-logo">
<h5 className='small-logo'>LEVIATHAN</h5>
</div>
<div className="space"></div>
<div className="link-container">
<div className="link-wrap">
Gift Cards
</div>
<div className="link-wrap">
Contact Us
</div>
<div className="link-wrap">
Order Status
</div>
<div className="link-wrap">
Live Chat
</div>
</div>
</div>
<div className="header-middle">
<div className="middle-logo">
<h5 className='big-logo'>LEVIATHAN</h5>
</div>
<div className="search-container">
<div className="search-wrapper">
<input
type="text"
id="search-bar"
placeholder="Search"
className='search'
/>
<div className="search-icon-wrapper">
<SearchIcon className='search-icon'/>
</div>
</div>
</div>
<div className="shipping-deals-container">
<div className="button-container">
<div className="shipping-deals-button">
<span className="deals-text">DAILY SHIPPING DEALS </span>
</div>
</div>
<div className="text-container">
<div className="text-slideshow">
<p className="shipping-deals-text">BUY A RIG AND YOUR ENTIRE ORDER SHIPS FREE</p>
</div>
</div>
</div>
<div className="icons-right">
<Profile className='login-pic'/>
<span>Log In</span>
<Cart className='shopping-cart'/>
</div>
</div>
<div className="header-bottom">
<div className="nav-bar">
<ul className='navigation'>
<li className='menu-items'>
<a href="/" className='button drop-down red'>Shop <DropDownIcon className='drop-icon'/></a>
<a href="/" className='button'>Equipment for Crossfit</a>
<a href="/" className='button'>New Gear</a>
<a href="/" className='button'>Barbells</a>
<a href="/" className='button'>Plates</a>
<a href="/" className='button'>Rigs and Racks</a>
<a href="/" className='button'>Shoes</a>
<a href="/" className='button'>Apparel</a>
<a href="/" className='button'>3 Ships Free</a>
<a href="/" className='button'>Zeus</a>
<a href="/" className='button drop-down'>The Index</a>
</li>
</ul>
</div>
</div>
</div>
)
}
export default Header
Here is the styling I am currently applying:
.header {
min-width: 100%;
margin: 0;
padding: 0;
}
.header-top {
background-color: white;
display: flex;
height: 2.5rem;
width: 100%;
}
.top-logo {
position: relative;
margin-left: 3rem;
}
.space {
flex-grow: 1;
}
.small-logo {
padding-top: 0.5em;
position: relative;
font-size: larger;
color: rgb(133, 133, 133)
}
.link-container {
display: flex;
/*border: 1px solid red;*/
margin-right: 3rem;
}
.link-wrap {
/*border: 1px solid green;*/
font-size: 14px;
padding-left: 1rem;
padding-top: 0.75rem;
}
.link-wrap a {
text-decoration: none;
color:#666666;
cursor: pointer;
}
/* Large section of header, black background */
.header-middle {
background-color: black;
height: 7rem;
display: flex;
}
/* Big LEVIATHAN text */
.middle-logo {
/*border: 1px solid red;*/
position: relative;
margin-left: 3rem;
display: flex;
justify-content: center;
align-items: center;
cursor: co;
}
.big-logo {
font-size: 48px;
/*padding-top: 2rem;*/
position: relative;
color: white;
}
.big-logo:hover {
color: rgb(210, 0, 0);
}
.search-container {
position: relative;
width: 40%;
display: flex;
flex-basis: 60%;
margin-left: 3rem;
align-items: center;
justify-content: center;
}
/*This is what has the appearance of the search bar*/
.search-wrapper {
min-width:100%;
height: 35%;
position: relative;
background-color: white;
display: flex;
flex-basis: 50%;
}
.search-icon-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
}
.search-icon {
color: black;
font-size: 20px;
}
/*This is the actual search bar tucked inside*/
.search {
width: 100%;
height: 100%;
border: none;
outline: none;
margin-left: 1em;
font-size: 17px;
}
.search::placeholder {
color:rgb(94, 94, 94);
}
/* This holds onto both our daily shipping deals button */
/* and our text slideshow */
.shipping-deals-container{
width: 18em;
margin-left: 2.5em;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
/*border: 2px solid rgb(136, 77, 255);*/
}
.shipping-deals-button {
width: 65%;
height: 44%;
background-color: rgb(234, 2, 2);
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1.5em;
}
.button-container {
width: 100%;
height: 50%;
/*border: 2px solid magenta;*/
}
.deals-text {
color: white;
font-size: 12px;
position: relative;
text-align: center;
align-items: stretch;
width: 100%;
}
.text-container {
/*border: 2px solid rgb(20, 182, 11);*/
width: 100%;
height: 50%;
}
.text-slideshow {
color: white;
width: 100%;
height: 50%;
font-size: 12px;
}
.shipping-deals-text {
transition: opacity 1s;
opacity: 1;
font-size: 13px;
}
.out {
opacity: 0;
transition: opacity 1s;
}
.shipping-deals-text-red{
color: red;
}
.navigation {
display: flex;
align-items:flex-start;
height: 3rem;
}
.menu-items {
height: 100%;
margin-left: 1.5rem;
padding-right: 1.5rem;
display: flex;
align-items: flex-start;
flex: 1;
}
ul {
list-style-type: none;
background-color: #333333;
}
.button {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-decoration: none;
color: white;
text-transform: uppercase;
white-space: nowrap;
padding: 1em;
font-weight: bold;
}
.button:hover {
color:rgb(210, 0, 0)
}
.red {
background-color: rgb(210, 0, 0);
}
.red:hover {
color: white;
}
.drop-icon {
font-size: 25px;
}
.icons-right {
height: 50%;
margin-top: 2em;
min-width: 10%;
display: flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
}
.login-pic {
color: white;
font-size: 20px;
}
.shopping-cart {
color: white;
font-size: 20px;
margin-left: 1rem;
}
.icons-right span {
color: white;
margin-left: 0.5em;
}
#media (max-width: 1025px) {
.shipping-deals-container {
display: none;
}
.header-top {
display: none;
}
.header-middle {
height: 50%;
}
.search-wrapper {
border: 2px solid white;
height: 2rem;
}
.icons-right {
margin-bottom: 2rem;
}
}
I have tried altering the width of my body, and html, but nothing seems to be giving me the solution I am looking for

With width: 100% on .header it shrinks the header the way you want it. That seems to be correct actually.
The element that prevents shrinking is <li class="menu-items"></li> because of display: flex;. Flexbox is by default not wrapping (flex-wrap: nowrap;).
Add flex-wrap. wrap; and you'll see everything will shrink with fit-content or width: 100%;
Hope this helps.
On another note: You shouldn't use <li> (List-Element) as the list. Thats what <ul> (Unsorted list) is for.
It should look more like this ->
<ul>
<li>
Shop
</li>
<li>
Equipment for Crossfit
</li>
<li>
New Gear
</li>
<!-- ... -->
</ul>

Align a div and two images inside of a DIV hortizonally

I want to align two images and a DIV. The DIV thats a rounded box keeps ending up beneath the two images.
Here's my HTML/CSS:
.main {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 600px;
height: 110px;
}
.one {
float: right;
height: 100px;
}
.two {
height: 100px;
}
.box {
position: absolute;
height: 50px;
width: 50px;
}
.rounded {
border-radius: 10px;
border-color: #FFF;
border: 5px solid white;
}
<div id="main" class="main">
<div id="one" class="one">
</div>
<div id="two" class="two"><img src="[![apple][1]][1]" width="100" height="76" /> <img src="[![titleofpage][1]][1]" width="309" height="61" />
<div class="box rounded"></div>
</div>
</div>
How can I align them all in a straight line in this centered DIV in the middle of the page?

You can try out flexbox:
.flex-container-center {
display: flex;
align-items: center; /* this is what you need :) */
justify-content: center;
}
<div class="flex-container-center">
<img src="https://via.placeholder.com/200x200" />
<img src="https://via.placeholder.com/100x100" />
<img src="https://via.placeholder.com/200x50" />
</div>
Also, here's a working example and my favorite guide on flexbox :)

Add display: flex and justify-content: center to .two class;
.two {
display: flex;
justify-content: center;
height: 100px;
}
When using display: flex, there is a main-axis and cross-axis and you can set the main axis with flex-direction: row or flex-direction: column. The default is flex-direction: row without calling it. This means in the above example the main-axis = row and cross-axis = column.
When centering items using flex box you have two options:
align-items: center
justify-content: center
align-items controls the cross axis and justify-content controls the main axis.
In your example the main axis is row because the flex-direction wasn't called, so it used the default row. To center the items on the horizontal axis, you have to use justify-content, which uses the main axis (flex-direction) --> row

I tweaked the CSS to use grid view, removed the absolute positions and floats. Added borders so I could see things :)
.main{
position: block;
margin: 0 auto;
width: 600px;
height: 110px;
}
.one {
border: 5px solid blue;
height: 100px;
}
.two {
display: grid;
grid-template-columns: repeat(3, 30%);
height: 100px;
border: 5px solid yellow;
}
.box {
height:50px;
width:50px;
}
.rounded {
border-radius: 10px;
border-color:#FFF;
border: 5px solid red;
}

CSS change size of text box with screen

I was creating a page on Reactjs. I have two react components, which are basically simple divs. Lets call one LeftPanel and the other one Right Panel.
So for left panel i have float set to left and for the right panel, i have float set to right, so that these panels appear on the respective sides of screen. (see screenshot attached).
The area left in the center, containing textbox and button is a div with following attributes:
.Area{
display: flex;
min-height: 125px;
align-content: center;
background-color: lightblue;
}
textarea and button have the following CSS:
.text{
display: flex;
width: 55em;
margin:3% 0% 0% 10%;
height: 33%;
font-size: x-large;
vertical-align: top;
resize:none;
border-top-left-radius:30em;
border-bottom-left-radius:30em;
border-color:black;
text-align: center;
outline: none;
box-shadow: 0px 5px 0px 0px rgb(51, 46, 46);
}
.searchBtn{
width:20em;
height: 38%;
margin-top:3%;
margin-right:10%;
border-top-right-radius: 30em;
border-bottom-right-radius:30em;
border-color:black;
outline:none;
box-shadow: 0px 4px 0px 0px rgb(51, 46, 46);;
}
Now, my problem is, that when i reduce the screen size, this happens:
Below 800px:
How do i fix this?
I can provide any further information if necessary.

You should avoid combining flex with float, because output behavior is often unexpectable. In below example I used flex for parent .container and for all children. I assume you want .leftPanel and .rightPanel to have defined min-width, so I added min-width: 250px; for .leftPanel (you can also add it to .rightPanel). Property flex: 1 for all children make them grow so to fit evenly .container, but all defined min-width are respected.
.container {
display: flex;
width: 100%;
}
.leftPanel, .rightPanel, .Area {
display: flex;
flex: 1;
border: 1px solid black;
}
.Area{
display: flex;
min-height: 125px;
align-content: center;
background-color: lightblue;
}
.leftPanel {
min-width: 250px;
}
<div class="container">
<div class="leftPanel">
leftPanel
</div>
<div class="Area">
Area
</div>
<div class="rightPanel">
rightPanel
</div>
</div>

Keep distance between 2 out of 3 elements equal when scaling window (responsive)

There are 2 img div's on top of each-other, next to a fluid header logo (.svg) also in a div.
The HTML:
<header class="site-header" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader"><div class="wrap"><div id="menu_container"><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/Hamburger_optimized.svg" alt="menu" class="menu-btn" /><div class="menu_spacer"></div><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/searchicon.png" alt="zoek" class="search_icon" /></div>
<div class="title-area"><h1 class="site-title" itemprop="headline"></h1></div><div class="vr_menu_logo"><img src="http://95.85.63.245/wp-content/uploads/dynamik-gen/theme/images/logo_VR_font.svg"></div>
</div></header>
The CSS:
.vr_menu_logo{
max-width:95%;
float:left;
margin-right:20px;
}
#menu_container {
max-width: 5%;
float: right;
}
.menu-btn{
cursor: pointer;
max-height: 30px;
max-width: 30px;
margin-top:2em;
}
.menu_spacer{height:4em;}
.search_icon{
cursor: pointer;
max-height: 24px;
max-width: 24px;
}
.site-header .wrap {
width: 1260px;
}
.site-header .wrap {
margin: 0 auto;
padding: 0;
float: none;
overflow: hidden;
}
Goal:
Scaling the browser window would keep the small hamburger and the search icon's on level with respectively the top and bottom of the logo. Actually the 3 seperate items should act as one logo.
Check the cssdesk here: http://www.cssdesk.com/JDyYQ
I was hoping a spacer div with a max-height would do the trick, or display:table-cell;
But I can't get it to work, anyone have an idea? (javascript can be an option too, but this must be possible with CSS I would think...)

here is an example using flexbox - note in the fiddle that the two div are exactly the same apart from having a different height. This should help you getting what you are trying to achieve. Obviously check what kind of browser support you need to provide as flexbox is a relatively new technology.
http://jsfiddle.net/zn50mmnu/
html:
<div class="flexy f1">
<span class="menu">M</span>
<span class="search">S</span>
</div>
<div class="flexy f2">
<span class="menu">M</span>
<span class="search">S</span>
</div>
css:
.flexy {
float: right;
clear: both;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 2px solid red;
margin: 10px;
}
.f1 {
height: 50px;
}
.f2 {
height: 90px;
}
.menu {
background: red;
width: 1em;
}
.search {
background: blue;
width: 1em;
}

How to set div scrollable when content more than size of the page?

I have the next page:
<div id = "menu">
Menu on the left side
</div>
<div id = "header">
Header content of the page
</div>
<div id = "body">
Data Data Data Data Data Data Data
</div>
<div id = "footer">
Additional Information
</div>
Whith Next layout: Menu should be on the left side:
#menu{
background: #244a7c;
padding: 7px 23px 0 7px;
width: 299px;
height: 1000px;
overflow: inherit;
margin-left: 0px;
display: block;
float: left;
}
#header{
display: inline-block;
width: 400px;
border-bottom: 1px solid rgb(238, 238, 238);
}
Body can have different data inside. My problem is:
When content of the body more than user page I want to fix all div except body. Menu should be on the left side, Header should be on the top of the page and footer on the bottom and ONLY body should be scrollable.
Any help, please.
Thanks!

Here's 2 Pure CSS solution
Without fixing any height (header/footer) or width (left column).
I actually prefer the second solution. (even tho he has less browser support)
1 - using CSS tricks
this is a totally responsive design and work well with all browsers (IE10, FF, Chrome, Safari, Opera, mobile browsers)
Working Fiddle
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper Container Inverse">
<div>
<div class="Footer">
</div>
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="LeftMenu">
</div>
<div class="Content">
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Inverse, .Inverse > *
{
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.LeftMenu
{
height: 100%;
float: left;
}
.Content
{
overflow: auto;
height: 100%;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
body > .Container
{
text-align: center;
}
.Header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color: #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
.Footer
{
background-color: #b5a8b7;
}
2 - using Flex
This layout can also be achieved using flex, but the current browser support is pure.
Here's a Working Fiddle only FF,Chrome,IE10.
HTML: (simpler)
<header>
</header>
<section class="Middle">
<div class="LeftMenu">
</div>
<div class="Content">
</div>
</section>
<footer>
</footer>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
text-align: center;
}
body
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.Middle
{
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 0;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
}
.Content
{
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 0 0;
overflow: auto;
}
/*For demonstration only*/
p
{
font-size: 1.3em;
}
.Important
{
font-weight: bolder;
color: white;
}
header
{
background-color: #bf5b5b;
}
.LeftMenu
{
background-color: #bdbe4c;
}
.Content
{
background-color: #90adc1;
}
footer
{
background-color: #b5a8b7;
}

If you set the header, footer & menu position as fixed & leave the body as it is, it should work. Only the body will be scrollable.
#header {
position: fixed;
top: 0;
display: inline-block;
width: 400px;
border-bottom: 1px solid rgb(238, 238, 238);
}
#footer {
position: fixed;
bottom: 0;
}
#menu {
position: fixed;
left: 0;
background: #244a7c;
padding: 7px 23px 0 7px;
width: 299px;
height: 1000px;
}
#body {
margin-left: 300px;
margin-top: <header-height>;
margin-bottom: <footer-height>;
}