I've made some code where the "section" that automatically determines the height when the content is inside, however, I want to have multiple columns in the same row and the columns are currently stacking.
How would I set the columns on to the same row without using float element as it takes the auto height of the section away?
.section {
width:100%;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 62px;
padding-left: 0px;
background-color: #f5f5f5;
position: relative;
}
.row {
position: relative;
width: 100%;
max-width: 1080px;
margin: auto;
padding: 33px 0;
}
.column{
width: 100%;
position: relative;
z-index: 9;
}
.container {
overflow: hidden !important;
position: relative;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
width: 300px;
height: 500px;
border-radius: 0px;
}
<div class="section">
<div class="row">
<div class="column">
<div class="container">
<img src="img.png">
<div class="content_block">
<div class="text">
<h2>Title</h2>
<a>2 reports</a>
</div>
</div>
</div>
</div>
<div class="column">
</div>
</div>
</div>
The easiest way would be to use flexbox.
So just add ..
display: flex;
.. and you could probably remove the width (or set it to 50%)
.row {
display: flex;
position: relative;
width: 50%;
max-width: 1080px;
margin: auto;
padding: 33px 0;
}
There are other ways of course (colspan, inline-block) but flexbox will give you even-height columns and make any other formatting much easier.
Related
I have an MVC web site and the Div's are not auto-sizing
I've set overflow to auto, I've set a minimum height
<div class="content-wrapper">
<div class="jetdocs-header">
<img src="~/Content/images/logo_header.png" />
</div>
<div class="content-section">
<div class="content-menu">
</div>
<div class="content-body">
<div style="width: 900px; height: 30px;">
</div>
#RenderBody()
</div>
</div>
</div>
here is the CSS
.content-wrapper {
background-image: url('images/top.gif');
background-repeat: repeat-x;
width: 1155px;
position: relative;
margin: 0px auto 0 auto;
background-color: whitesmoke;
border-radius: 5px;
margin-top: 5px;
padding-bottom: 35px;
min-height: 600px;
overflow: auto;
}
.content-section {
top: 5px;
position: relative;
background-color: whitesmoke;
overflow: auto;
}
.content-menu {
position: relative;
width: 140px;
min-height: 700px;
height: 100%;
background-color: silver;
float: left;
overflow: auto;
}
.content-body {
position: relative;
width: 1000px;
float: left;
left: 2px;
background-color: whitesmoke;
overflow: auto;
}
The Content-Menu should auto-size to the same height as the content-section. and both should cause the content-wrapper to auto-size to match the height of the largest of the two...
Don't think this c# related, but have you tried setting the height of the parent divs? I think even if you specify min-height, it still needs height for the overflow to work correct.
I think use should use the css3 flexbox properties on the '.content-section'.
.content-section
{
display: flex;
align-items: stretch;
}
.content-body
{
min-height: 600px;
}
The Content-Menu will get the size of the Content-Body (or invers if the Content-Menu is higher), and the Content-Section will auto-size to match the height of the childs. More info about align-items here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Current Situation
Using the following code I show a couple of divs floated to the left.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
white-space: nowrap;
}
.column {
height: 500px;
width: 150px;
background: red;
float: left;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
Current result:
Problem
What I want is that the red boxes don't wrap within its container. I want both, a vertical and horizontal scroll bar if the space is not enough. For the vertical scrollbar it works. What am I missing?
JSFiddle: https://jsfiddle.net/brainchest/j6zh400v/
A fix I found was to change the .column from being a float: left to display: inline-block. This treats each column as a "word" (like a word in text) and thus the white-space: no-wrap; applies. Otherwise, the float: left changes the way the element gets positioned.
Edited Fiddle: https://jsfiddle.net/9bo4f5pv/
Use display: flex on the parent, then flex: 0 0 150px on the columns.
* {
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
}
.header {
height: 80px;
position: fixed;
width: 100%;
background: green;
}
.inner-container {
position: absolute;
top: 80px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
display: flex;
}
.column {
height: 500px;
flex: 0 0 150px;
background: red;
margin: 5px;
}
<div class="container">
<div class="header">
</div>
<div class="inner-container">
<div class="column">
</div>
<div class="column">
</div>
<div class="column">
</div>
</div>
</div>
I am trying to wrap my right div around my left, in an inverse moon shape? Here's what it looks like right now.
What I want to do is have the red block wrap around the rounder corners of the black block. Here is the current HTML/CSS code, I apologize if the CSS code is a little "messy" as i have been experimented different codes.
HTML
<div class="container full-width">
<div class="row proj">
<div class="col-md-8 full-width">
<div class="content">
</div>
</div>
<div class="col-md-4 full-width">
<div class="options">
</div>
</div>
</div>
</div>
CSS
.content {
margin-top: 75px;
position: relative;
width: 70vw;
max-width: 100%;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
}
.options {
margin-top: 75px;
position: relative;
width: 30vw;
max-width: 100%;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
padding-left: 0;
padding-right: 0;
overflow-x: hidden;
}
UPDATE
Answer Found, thanks for the help, so had to tweak the code a bit from your posted code, it looks like this now.
.content {
margin-top: 75px;
width: 30vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-top: 75px;
margin-left:3%;
position:relative;
float:right;
width: 30vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
position: absolute;
padding-left: 0;
padding-right: 0;
}
and the final result looks like this, will tweak the positioning some more but the result is what i wanted, thanks again.
UPDATE 2
Ok, had to make another edit, for some reason I had to float them both left. OTherwise if i kept the red div float right and tried to expand its width, it would expand to the left, any idea why? current code:
.content {
margin-top: 75px;
width: 44vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-top: 75px;
margin-left:20%;
position:relative;
float:left;
width: 50vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
.container .full-width{
position: absolute;
padding-left: 0;
padding-right: 0;
}
Use position:relative; for content and position:absolute; for options
.content {
width: 30vw;
height: 90vh;
overflow: hidden;
background-color: black;
border-radius: 0 50vw 50vw 0;
float:left;
position:relative;
z-index:2;
}
.options {
margin-left:3%;
position:absolute;
float:right;
width: 30vw;
height: 90vh;
max-height: 100%;
overflow: hidden;
background-color: red;
}
<div class="container full-width">
<div class="row proj">
<div class="col-md-8 full-width">
<div class="content">
</div>
</div>
<div class="col-md-4 full-width">
<div class="options">
</div>
</div>
</div>
I don't understand why the float: right doesn't work on the other box.
Anyone who can help me about this?
This is my code:
.main-box {
height: 400px;
width: 400px;
position: relative;
background: black;
}
.right-box {
float: right;
width: 100px;
height: 100px;
background: red;
}
.left-box {
width: 100px;
height: 100px;
background: red;
}
.bottom-boxes {
position: absolute;
bottom: 0;
}
<div class="main-box">
<div class="top-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
<div class="bottom-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
</div>
This is the resulting image of my code:
This is the resulting image I want to achieve:
Because of position: absolute on bottom-boxes so you need to add width: 100%
.main-box {
height: 400px;
width: 400px;
position: relative;
background: black;
}
.right-box {
float: right;
width: 100px;
height: 100px;
background: red;
}
.left-box {
width: 100px;
height: 100px;
background: red;
}
.bottom-boxes {
position: absolute;
bottom: 0;
width: 100%;
}
<div class="main-box">
<div class="top-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
<div class="bottom-boxes">
<div class="right-box"></div>
<div class="left-box"></div>
</div>
</div>
But here is better solution using flexbox
.main-box {
height: 200px;
width: 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
background: black;
}
.row {
display: flex;
justify-content: space-between;
}
.box {
width: 50px;
height: 50px;
background: red;
}
<div class="main-box">
<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>
</div>
Here's a working fiddle
When you put absolute position on a container, you have to specify also top, right and left property with bottom property to set a width and a height of it.
.bottom-boxes{
position:absolute;
bottom: 0;
left: 0;
right: 0;
}
In this case, left: 0; and right: 0; are equivalent to width: 100%; and top: 0 and bottom: 0; are equivalent to height: 100%;
When you don't specify a value, by default it's "auto;"
float won't work on an absolutely positioned element - you need to give top or bottom and right or left parameters to it (the default setting is top: 0; and left: 0;, i.e. the upper left corner of the parent element).
On a webpage I have a container div and inside it two divs next to each other. In the first inner div I am trying to set up a CSS table that has 4 columns that evenly fill the div.
The problem I am having is that the cells seem to get their width relative to the page's width, not the table/it's parent div. If I decrease the width from 25% to something lower, it will fit, but if I scale the page, they will still wrap, as the div on the right hits the rightmost table cell.
How should I setup the layout to keep them inside the div?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html,body, div {
display: block;
height: 100%;
width: 100%;
}
#container {
position: absolute;
height: 300px;
width: 100%;
}
.sideBySide {
position: absolute;
float: left;
height: 100%;
}
#galleria {
background-color:#0C0;
left: 0px;
right: 300px;
width: auto;
}
#tagit {
background-color: #099;
right: 0px;
width: 300px;
}
#table {
position: absolute;
margin: 0px;
padding: 0px;
display: table;
height: 100%;
width: 100%;
}
.table-row {
position: relative;
margin: 0px;
padding: 0px;
display: table-row;
width: 100%;
height: 25%;
}
.table-cell {
position: relative;
margin: 0px;
padding: 0px;
display: table-cell;
float: left;
height: 100%;
width: 25%;
padding: 20px;
}
.kuva {
position: relative;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: #999;
}
</style>
</head>
<body>
<div id="container">
<div id="galleria" class="sideBySide">
<div id="table">
<div class="table-row">
<div class="table-cell">
<div class="kuva">Cell1</div>
</div>
<div class="table-cell">
<div class="kuva">Cell2</div>
</div>
<div class="table-cell">
<div class="kuva">Cell3</div>
</div>
<div class="table-cell">
<div class="kuva">Cell4</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Remove
float: left;
from
.table-cell