I am pretty bad with css, so I was wondering how I can keep my sidebar full height, even though it doesnt have full content.
This is my css:
#wrapper {
display: flex;
flex-wrap: wrap;
background-color: yellow;
}
#wrapper .sideBar {
background-color: green;
width: 200px;
margin-left: 10px;
overflow-x: hidden;
padding-top: 20px;
}
#wrapper .productsBox{
width: 250px;
margin: 3px;
}
But I get this result
However I want a result that looks like this:
Any idea how I can fix this? And I want to have a responsive view, so when a user use phone to browse it displays a decent view. Thats the reason I use the wrapper.
html:
<div id="wrapper">
<form method="get" id="sortForm">
#Html.DropDownList("sort", new SelectList(ViewBag.sortOptions,"Value","Text"), new {#class="form-control", onchange = "sortingChanged()" })
<div class="sideBar">
<strong>Search for products</strong>
<input type="text" class="searchBar" name="SearchString" value="#ViewData["CurrentFilter"]" placeholder="Search.."/>
<hr />
<h6>Price</h6>
<div>
<input type="number" class="priceRangeInput" name="minPrice" value="#ViewData["MinPriceFilter"]" oninput="validity.valid||(value='');" />
<span>Min</span>
</div>
<div>
<input type="number" class="priceRangeInput" name="maxPrice" value="#ViewData["MaxPriceFilter"]" oninput="validity.valid||(value='');" />
<span>Max</span>
</div>
<br />
<hr>
<h6>Types</h6>
<button type="submit" class="btn customGreen" >Set filters</button>
</form>
<br />
</div>
#{
foreach(var p in #Model)
{
<div class="productsBox">
<div class="card">
<a asp-action="Details" asp-route-id="#p.Id">
<img alt="#p.Name" class="contain" src="#p.FilePath" height="300" style="width: 100%;" />
</a>
<h3>#p.Name</h3>
<p class="price">#p.Price kr/#p.Unit</p>
<a asp-action="Details" asp-route-id="#p.Id">
<button class="customGreen">See more</button>
</a>
</div>
</div>
}
}
</div>
html, body {
height: 100%
}
html,
body {
height: 100%; /* to set height to 100% */
}
body {
margin: 0; /* to remove default margins */
}
#wrapper {
height: 100%; /* to set height to 100% */
}
#wrapper {
display: flex;
background-color: yellow;
}
.sideBar {
background-color: #000;
width: 200px;
color: #fff;
overflow-x: hidden;
padding-top: 20px;
}
.product-wrapper {
width: calc(100% - 200px); /* 100% - (sidebar width) */
}
.productsBox {
display: inline-block;
width: 150px;
height: 150px;
color: #fff;
margin: 3px;
background: #2f910f;
}
<html>
<body>
<div id="wrapper">
<div class="sideBar">
Sidebar
</div>
<div class="product-wrapper">
<div class="productsBox">
Item
</div>
</div>
</div>
</body>
</html>
You should take .sideBar out of the #wrapper container and apply width: calc(100% - 210px) to #wrapper (i.e. the width of the container/window minus sidebar minus its left margin). That way both together will be 100% wide, but the contents of #wrapper will not go under the sidebar.
you should add side bar and another containts in different divs and add this code to it:
.wrapper{
display:flex;
flex-direction:row;
}
.sidebar{
background-color:red;
width:50%;
}
.containts{
width:50%;
background-color:green;
}
<div class="wrapper">
<div class="sidebar">
sidebar
</div>
<div class="containts">
containts
</div>
</div>
Add the following code in css it worked for me
height: 100%;
Related
I have a design with images in columns with a fixed margin (or gap) between them.
Right now the columns have margins, and because the total margin is different for each column (since there is no left margin on the first column and no right margin on the last), the width of each column image becomes different, causing the height to be different on the middle images.
I tried to divide the margin so that each column uses the same total amount of margin (which seems instinctively over complicated) . I can get that to work, but it doesn't work for 3 columns. You can't make three columns use the same amount of margin I think.
I know there is some "gap" property in css grid, but how do I solve it in flexbox?
See my example code here: example
<template>
<div id="app">
<div class="row">
<div class="col-3">
<div>
<img
src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80"
/>
</div>
</div>
<div class="col-3">
<div>
<img
src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80"
/>
</div>
</div>
<div class="col-3">
<div>
<img
src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80"
/>
</div>
</div>
<div class="col-3">
<div>
<img
src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80"
/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
components: {},
};
</script>
<style lang="scss">
#app {
margin: 0 auto;
width: 800px;
border: 3px solid orange;
}
.row {
display: flex;
box-sizing: border-box;
display: flex;
flex-grow: 0;
flex-shrink: 1;
flex-direction: row;
flex-wrap: wrap;
img {
width: 100%;
object-fit: cover;
}
}
.col-3 {
flex: 0 1 25%;
max-width: 25%;
/* width:25%; */
> div {
/* margin-right:25px; */
}
&:first-child > div {
margin-right: 12.5px;
}
&:nth-child(2) > div {
margin-right: 12.5px;
margin-left: 12.5px;
}
&:nth-child(3) > div {
margin-right: 12.5px;
margin-left: 12.5px;
}
&:last-child > div {
margin-left: 12.5px;
}
}
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Update: I realise now that you're looking for a solution using flex rather than css grid. The other answer provides some options there. If you do want to use grid though this approach is handy as your widths will be automatically calculated with whatever gap you choose.
Use display:grid, and set your container to have four columns with one fractional unit for each column, and a column-gap of the gap you want.
The gap below the image is caused because by default images are inline elements, so they sit with the baseline of text. If you set your images to display:block the gap will disappear.
.row {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 12px;
column-gap: 12px;
border:3px solid yellow;
}
.col-3 {
width: 100%;
}
.col-3 img {
display: block;
width: 100%;
object-fit: cover;
}
<div class="row">
<div class="col-3">
<img src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80" />
</div>
<div class="col-3">
<img src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80" />
</div>
<div class="col-3">
<img src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80" />
</div>
<div class="col-3">
<img src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80" />
</div>
</div>
I have written the code using flexbox and made a little change to your HTML code
<template>
<div id="app">
<div class="row">
<div>
<img
src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80"
/>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80"
/>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80"
/>
</div>
<div>
<img
src="https://images.unsplash.com/photo-1633357337538-83612701c7a9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80"
/>
</div>
</div>
</div>
</template>
<style lang="scss">
body {
margin: 0;
.row {
display: flex;
width: 100%;
justify-content: space-between;
div {
padding: 0 10px;
&:nth-child(1) {
padding-left: 0;
}
&:nth-last-child(1) {
padding-right: 0;
}
img {
width: 100%;
}
}
}
}
</style>
Flexbox does have a gap property that will space your items evenly and won't create empty spaces on the right or left. But, based on the code sample you shared, I think your issue is a combination of a couple of things:
Your middle two containers are smaller than your outer two containers because of their extra margin
Your images are set to take the full width of their containers
Because the middle two containers are smaller—and the images are preserving their aspect ratio—you get images that are both narrower and shorter.
If you strip everything down to just using gap, I think you'll be a lot closer to what you're trying to accomplish:
.flexbox {
background-color: #ace;
border: 3px solid orange;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
gap: 8px;
width: 800px;
}
.container {
flex: 0 1 25%;
margin: 0;
max-width: 25%;
}
img.full-width {
width: 100%
}
<div class="flexbox">
<div class="container">
<img class="full-width" src="https://picsum.photos/300/200" />
</div>
<div class="container">
<img class="full-width" src="https://picsum.photos/300/200" />
</div>
<div class="container">
<img class="full-width" src="https://picsum.photos/300/200" />
</div>
<div class="container">
<img class="full-width" src="https://picsum.photos/300/200" />
</div>
</div>
This image shows what I am trying to do.
Basically, I have a header and footer inside the body. I have a div1 inside a header which has a size that can vary. I want to align div2, which is inside the footer, so that its right border is matches the right border of div1.
The following HTML can explain the structure.
<body>
<div id="header">
<div id="div1">
</div>
</div>
<div id="footer">
<div id="div2">
</div>
</div>
This would be the css.
#div1 {
overflow: auto;
display: grid;
float: start;
}
#div2 {
width: 20px;
// ??????
}
There's no float: start. You just be better off having a common container, as how it is in Bootstrap and other frameworks to "contain" your code. So your page might be rendered well this way:
body {
font-family: 'Segoe UI';
background: #ffa500;
}
#header {
background-color: #fcc;
padding: 10px;
}
#footer {
background-color: #f99;
padding: 10px;
}
.container {
max-width: 65%;
overflow: hidden;
}
#div1 {
padding: 10px;
background-color: #99f;
}
#div2 {
padding: 10px;
background-color: #ccf;
float: right;
width: 50%;
}
<div id="header">
<div class="container">
<div id="div1">
div1
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div id="div2">
div2
</div>
</div>
</div>
Preview
I am attempting to put together a web page that has four areas: a header, footer, content, and controls. The header and footer should be fixed at the top and bottom of the page (respectively) and automatically size to their content. The controls should go on the far right side of the page (vertically between the header and footer) and is fixed-width. The content area should fill the remainder of the page.
I had this working, but now whenever I add any kind of content (even just a single-word paragraph element), the controls area moves to almost the very bottom of the page. You can see what I'm referring to here: http://jsfiddle.net/ym8vY/1/
If I leave the controls div completely empty, it lays out exactly how I want it: http://jsfiddle.net/ym8vY/
My body currently looks like:
<header>
<p>Header</p>
</header>
<div class="main">
<div id="streamGraph" class="page">
<div class="page-row">
<div class="page-content-container-outer">
<div class="page-content-container-inner">
<div id="graphContainer" class="page-content"></div>
</div>
</div>
<div class="page-controls-container-outer">
<div class="page-controls-container-inner">
<div class="page-controls"><!-- If anything goes inside here, it breaks -->
<div style="display: table; height: 100%;">
<div style="display: table-row; height: 0;">
<div>
<label for="sampleCount"># Samples:</label>
<input type="text" id="sampleCount" name="sampleCount" value="100" />
</div>
<div>
<label for="tagCount"># Tags:</label>
<input type="text" id="tagCount" name="tagCount" value="25" />
</div>
<div>
<label for="fromDate">From:</label>
<input type="date" id="fromDate" name="fromDate" />
</div>
<div>
<label for="toDate">To:</label>
<input type="date" id="toDate" name="toDate" />
</div>
<button id="tagsButton">Customize Tags</button>
<button id="refreshButton">Apply</button>
</div>
<div style="display: table-row;">
<div id="tagContainer" style="overflow: auto; height: 100%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>Footer</p>
</footer>
And my CSS is:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
display: table;
}
header, .main, footer {
display: table-row;
width: 100%;
}
header, footer {
background: lightgray;
}
.main {
height: 100%;
}
.page {
height: 100%;
display: table;
}
.page-row {
display: table-row;
width: 100%;
}
.page-content-container-outer {
display: table-cell;
width: 100%;
height: 100%;
padding: 10px;
}
.page-controls-container-outer {
display: table-cell;
height: 100%;
padding: 10px;
}
.page-content-container-inner {
border: solid;
border-color: gainsboro;
border-width: 5px;
border-radius: 10px;
width: 100%;
height: 100%;
padding: 5px;
}
.page-controls-container-inner {
border: solid;
border-color: gainsboro;
border-width: 5px;
border-radius: 10px;
height: 100%;
padding: 5px;
}
.page-controls {
height: 100%;
width: 300px;
}
.page-content {
height: 100%;
}
Your right-side div is being pushed down to the baseline. Add vertical-align:top to fix it:
div
{
vertical-align: top;
}
JSFiddle
Side note: The default value for vertical-align is baseline. Always keep this in mind when using cells and inline-blocks.
Add vertical-align:top; to your .page-controls-container-outer class
Change this
<div style="display: table-row; height: 0;">
to this
<div style="display: table-row; height: 0; float:left;">
Am using Ninja Forms on a WP website. There are 2 different fields (textbox & submit button) that are separate DIVs, both children of single DIV.
They appear on consecutive lines and I cannot seem to get the on same line. Help?
Can see current code of the DIVs on the site: http://theroadmap.co/generation/
<div id="ninja_forms_form_2_all_fields_wrap" class="ninja-forms-all-fields-wrap">
<div class="field-wrap text-wrap label-above ninjacomment-wrap" id="ninja_forms_field_9_div_wrap" data-visible="1">
<input type="hidden" id="ninja_forms_field_9_type" value="text">
<label for="ninja_forms_field_9" id="ninja_forms_field_9_label" class=""> </label>
<input id="ninja_forms_field_9" data-mask="" name="ninja_forms_field_9" type="text" class="ninja-forms-field ninjacomment " value="" rel="9">
<div id="ninja_forms_field_9_error" style="display:none;" class="ninja-forms-field-error">
</div>
</div>
<div class="field-wrap submit-wrap label-left ninjasubmit-wrap" id="ninja_forms_field_10_div_wrap" data-visible="1">
<input type="hidden" id="ninja_forms_field_10_type" value="submit">
<input type="submit" name="_ninja_forms_field_10" class="ninja-forms-field ninjasubmit" id="ninja_forms_field_10" value="Suggest a link!" rel="10">
<div id="ninja_forms_field_10_error" style="display:none;" class="ninja-forms-field-error">
</div>
</div>
</div>
Modifications I've added so far:
/* Ninja Form mods */
.ninjacomment {
background: #ffbf00 !important;
border: 3px;
color: black !important;
width: 50%;
}
#ninja_forms_field_9 {
margin-left: 0;
width: 30%;
float: left;
position: inline-block;
}
#ninja_forms_field_10 {
margin-left: 0;
float: right;
position: inline-block;
}
.ninja-forms-all-fields-wrap {
overflow: hidden;
}
Thanks!
You can get elements on the same line several ways.
Sample markup:
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
inline-block
.child {
display: inline-block;
width: 40%; /* adjust */
}
Floats
.child {
float: left; /* or right */
width: 40%; /*adjust */
}
display: table
.parent {
display: table;
width: 100%;
}
.child {
display: table-cell;
width: 40%; /* adjust */
}
white-space: nowrap
.parent {
white-space: nowrap /* children will stay on the same line no matter how wide */
}
<div id="wrapper">
<div id="left">
<input id="ninja_forms_field_9" data-mask="" name="ninja_forms_field_9" type="text" class="ninja-forms-field ninjacomment " value="" rel="9"></input>
</div>
<div id="right">
<input type="submit" name="_ninja_forms_field_10" class="ninja-forms-field ninjasubmit" id="ninja_forms_field_10" value="Suggest a link!" rel="10"></input>
</div>
CSS
#wrapper {
width:300px;
}
#left {
float:left;
width:146px;
}
#right {
float:right;
width:148px;
}
Working Fiddle
I know this is a rather simple question, but I can't figure it out for the life of me. I have two links which I've applied a background image to. Here's what it currently looks like (apologies for the shadow, just a rough sketch of a button):
However, I want those two buttons to be side by side. I can't really figure out what needs to be done with the alignment.
Here's the HTML
<div id="dB"}>
Download
</div>
<div id="gB">
Gallery
</div>
Here's the CSS
#buyButton {
background: url("assets/buy.png") 0 0 no-repeat;
display:block;
height:80px;
width:232px;
text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}
#galleryButton {
background: url("images/galleryButton.png") 0 0 no-repeat;
display:block;
height:80px;
width:230px;
text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}
Beware float: left… 🤔
…there are many ways to align elements side-by-side.
Below are the most common ways to achieve two elements side-by-side…
Demo: View/edit all the below examples on Codepen
Basic styles for all examples below…
Some basic css styles for parent and child elements in these examples:
.parent {
background: mediumpurple;
padding: 1rem;
}
.child {
border: 1px solid indigo;
padding: 1rem;
}
Using the float solution my have unintended affect on other elements. (Hint: You may need to use a clearfix.)
html
<div class='parent'>
<div class='child float-left-child'>A</div>
<div class='child float-left-child'>B</div>
</div>
css
.float-left-child {
float: left;
}
html
<div class='parent'>
<div class='child inline-block-child'>A</div>
<div class='child inline-block-child'>B</div>
</div>
css
.inline-block-child {
display: inline-block;
}
Note: the space between these two child elements can be removed, by removing the space between the div tags:
html
<div class='parent'>
<div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>
css
.inline-block-child {
display: inline-block;
}
html
<div class='parent flex-parent'>
<div class='child flex-child'>A</div>
<div class='child flex-child'>B</div>
</div>
css
.flex-parent {
display: flex;
}
.flex-child {
flex: 1;
}
html
<div class='parent inline-flex-parent'>
<div class='child'>A</div>
<div class='child'>B</div>
</div>
css
.inline-flex-parent {
display: inline-flex;
}
html
<div class='parent grid-parent'>
<div class='child'>A</div>
<div class='child'>B</div>
</div>
css
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr
}
Apply float:left; to both of your divs should make them stand side by side.
keep it simple
<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>
.section {
display: flex;
}
.element-left {
width: 94%;
}
.element-right {
flex-grow: 1;
}
<div class="section">
<div id="dB" class="element-left" }>
Download
</div>
<div id="gB" class="element-right">
Gallery
</div>
</div>
or
.section {
display: flex;
flex-wrap: wrap;
}
.element-left {
flex: 2;
}
.element-right {
width: 100px;
}
<div class="section">
<div id="dB" class="element-left" }>
Download
</div>
<div id="gB" class="element-right">
Gallery
</div>
</div>