I am trying to create a site layout with a main content area, a marginal column on the right. Below the main content there may go more elements, usually with the same width as the main content. But now it should be possible to create wider elements in this area and the marginal column should reflow automatically.
To make it short, what I want to achieve is something like this
body,
html {
height: 100%;
margin: 0px;
padding: 0px;
}
div.content-area {
outline: 3px solid black;
margin: 6px;
padding: 5px;
}
#main {
width: 200px;
float: none;
min-height: 250px;
display: inline-block;
}
div.marginal {
height: 100px;
width: 250px;
float: right;
background-color: #f1f1f1;
clear: both;
}
div.content-module {
width: 200px;
height: 100px;
float: none;
display: inline-block;
}
div.content-module.wide {
width: 400px;
}
<!DOCTYPE html>
<html>
<head>
<title>This is how it should look like</title>
</head>
<body>
<div style="width: 500px; height: 90%;">
<div class="marginal content-area">Marginal module</div>
<div class="marginal content-area">Marginal module</div>
<div class="marginal content-area">Marginal module</div>
<div id="main" class="content-area">
Main Area
</div>
<div class="content-module content-area">Content</div>
<div class="content-module content-area wide">Content wide</div>
<!-- Following div will be above, where the other marginal divs are -->
<div class="marginal content-area">Marginal module</div>
<div class="content-module content-area">Another content</div>
</div>
</body>
</html>
...with the HTML code shown here.
<body>
<div style="width: 500px; height: 90%;">
<div class="marginal content-area">Marginal module</div>
<div class="marginal content-area">Marginal module</div>
<div class="marginal content-area">Marginal module</div>
<div class="marginal content-area">Marginal module (should appear under 'Content wide')</div>
<div id="main" class="content-area">
Main Area
</div>
<div class="content-module content-area">Content</div>
<div class="content-module content-area wide">Content wide</div>
<div class="content-module content-area">Another content</div>
</div>
</body>
My first attempt was removing the clear:both; style from the marginal modules. But this causes the marginal elements to align next to each other, side by side. But they have to be under each other.
Any idea how to achieve something like this?
Related
I've read various questions about scrolling within flexbox but I seem to have a slightly more complicated version of what I've seen. I have an editor that uses flexbox and contains a toolbar with many components that is scrollable, and this works fine on its own. However, on the live site it's wrapped in a parent which is display:flex (for reasons I won't go into but this editor isn't the only component on the page), and as soon as the editor is put within this flex parent its scrollable area becomes full width, pushing the whole page wider than it should be.
In this snippet, all the 'Thumb Example' elements are supposed to be scrollable within their parent .image-thumbs-container respecting the page's overall width:800px limit, but they lay out and push their parent wider than that. But, if you turn off the display:flex of the .product-page element, the scrolling then works. I built this simplified example of just the editor to demonstrate the problem, and it worked fine, took me a while to realise it was a parent element that was causing the error.
[Edit] This snippet may not work as expected within StackOverflow, please see this identical Pen: https://codepen.io/neekfenwick/pen/NWbpqZg
body {
background-color: lightgrey;
}
.page-container {
width: 800px;
background-color: white;
}
.product-page {
display: flex; /* Disable me to make scrolling work */
flex-wrap: wrap;
}
.uploads-container {
text-align: left;
white-space: nowrap;
padding: 5px;
border: 1px solid black;
display: flex;
box-sizing: border-box;
}
.uploads-scroller {
overflow-x: scroll;
flex: 1 1 auto;
overflow-y: hidden;
}
.image-thumbs-container {
border: initial;
}
.image-thumb {
display: inline-block;
width: 100px;
border: solid 2px grey;
border-radius: 5px;
margin-right: 2px;
vertical-align: top;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="mock.css">
<title>Mockup</title>
</head>
<body>
<div class="page-container">
<div class="product-page">
<div class="unrelated-content">Page contains other content required to layout by flexbox.</div>
<div class="editor">
<div class="uploads-panel">
<div class="uploads-container">
<div class="uploads-file-container">File Upload<br>Widget Goes<br>Here</div>
<div class="uploads-scroller">
<div class="image-thumbs-container">
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
</div>
</div>
</div>
</div>
<div class="workspace">
<h2>Some complicated workspace content goes here.</h2>
</div>
</div>
<div class="unrelated-content">Page contains other content required to layout by flexbox.</div>
</div>
</div>
</body>
</html>
So, please bear in mind I don't want to alter anything above the .editor div. A lot of our site relies on the .product-page CSS. I can consider it, but, is it possible to fix this scrolling problem by only modifying elements from the .editor div and down?
You can fix this one by just setting 100% width on .editor.
Since the parent already has flex-wrap: wrap, this should work out just fine for you. The content below the editor will just wrap to below it.
.editor { /* <-- add this */
width: 100%;
}
body {
background-color: lightgrey;
}
.page-container {
width: 800px;
background-color: white;
}
.product-page {
display: flex; /* Disable me to make scrolling work */
flex-wrap: wrap;
}
.uploads-container {
text-align: left;
white-space: nowrap;
padding: 5px;
border: 1px solid black;
display: flex;
box-sizing: border-box;
}
.uploads-scroller {
overflow-x: scroll;
flex: 1 1 auto;
overflow-y: hidden;
}
.image-thumbs-container {
border: initial;
}
.image-thumb {
display: inline-block;
width: 100px;
border: solid 2px grey;
border-radius: 5px;
margin-right: 2px;
vertical-align: top;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="mock.css">
<title>Mockup</title>
</head>
<body>
<div class="page-container">
<div class="product-page">
<div class="unrelated-content">Page contains other content required to layout by flexbox.</div>
<div class="editor">
<div class="uploads-panel">
<div class="uploads-container">
<div class="uploads-file-container">File Upload<br>Widget Goes<br>Here</div>
<div class="uploads-scroller">
<div class="image-thumbs-container">
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
<div class="image-thumb">Thumb<br>Example</div>
</div>
</div>
</div>
</div>
<div class="workspace">
<h2>Some complicated workspace content goes here.</h2>
</div>
</div>
<div class="unrelated-content">Page contains other content required to layout by flexbox.</div>
</div>
</div>
</body>
</html>
Add width: 100% to your .editor element.
Or, just in case you really needed to, add max-width: 800px to any of the following elements... .editor, .uploads-container, or .uploads-container
I am having some difficulty with some html code (I have never done html programming of any significance) where I am trying to do something fairly simple. Actually I broke it down to the simplest form for now. So I have three blocks on top of each other. The first block at the very top has three sub boxes within it horizontally. I fixed the height of this block at 250px since my text fits into it. However my second block (Center) overlaps with the Top div. How do I specify that the center div start after the Top div? I want it to display a few pixels below the Top div.
<div id="Report" style="height: auto">
<div id="Top" style="width:inherit; height:250px">
<div id="First" class="TopMostLeft" >
<span style="font-family:Calibri; font-size:small">Info</span>
<table style="width:100%" > ... </table>
<div id="Second" class="TopMostCenter">
<span style="font-family:Calibri; font-size:small">Info2</span>
<div id="Third" class="TopMostRight">
<div id="About" class="TopRightDiv">
<table style="width:100%">
</div>
<div id="Center" style="border:solid; border-width:2px; border-color:lightgray; padding:4px; margin:10px">
<div id="Bottom" style="border-width:2px;border-width:2px; border-color:lightgray; padding:4px; margin:10px">
</div>
Here's what you need. Create a stylesheet so we can style it much better.
Working Fiddle: https://jsfiddle.net/v9jgj7n3/
I created your layout. This is how I understand what you need.
HTML
<div id="Report">
<div id="Top">
<div id="First" class="TopMostLeft" ></div>
<div id="Second" class="TopMostCenter"></div>
<div id="Third" class="TopMostRight"></div>
</div>
<div id="Center"></div>
<div id="Bottom"></div>
</div>
CSS
#Top {
width: 100%;
display: flex;
height: 250px;
}
#Top #First {
width: 10%;
background: red;
}
#Top #Second {
width: 40%;
background: blue;
}
#Top #Third {
width: 50%;
background: yellow;
}
#Center {
height: 200px;
width: 100%;
background: gray;
}
#Bottom {
height: 80px;
width: 100%;
background: black;
}
Edit the width and height to your desired value. This is how it will work
Also, I notice that you didn't close the child element of Top. You must always close DIV, so the HTML code will run well. It breaks your code.
Hope it helps. Cheers! Good Morning from Philippines.
I have built a template to layout what I intend to accomplish. Everything seems to work well with what I have learned from the stackoverflow community.
However, the Footer which is its own container and has "section7" as another DIV is not displaying as 150 pixels in height. Basically all sections have fixed height except for Section 5 and Section 6 which have to scale in height depending on the browser window size or content that will be placed inside the section. So if content is sparse, I just want the height to be 100% of the remaining browser space so that the website is top to bottom. However if there is content that is lengthy obviously I want the middle section to adapt and continue as required. Hope I am making sense.
The challenge is I don't know where I am wrong and thus do not know how to pose the question in the search function as I imagine it is an easy task for those with experience. Any help is appreciated.
The HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sample Website</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="header">
<div class="section1">section 1</div>
<div class="section2">section 2</div>
<div class="section3">section 3</div>
<div class="section4">section 4</div>
</div>
<div class="middle">
<div class="section5">section 5</div>
<div class="section6">section 6</div>
</div>
<div class="footer">
<div class="section7">section 7</div>
</div>
</div>
</body>
</html>
The CSS:
#charset "utf-8";
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px;
background-color:#DBDBDB
}
div.container {
width: 1200px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
}
div.header {
height: 100px;
}
div.middle {
min-height: 400;
}
div.footer {
height: 150px;
}
div.section1 {
background-color:#FF0004;
height: 100px;
width: 275px;
float:left;
position:relative;
}
div.section2 {
background-color:#FFA600;
height: 100px;
width: 100px;
float:left;
position:relative;
}
div.section3 {
background-color:#00C304;
height: 50px;
}
div.section4 {
background-color:#DFDD00;
height: 50px;
}
div.section5 {
background-color:#0A00FF;
width: 275px;
height: 400px;
float:left;
height: 100vh;
}
div.section6 {
background-color:#CB05B1;
width: 925px;
height: 400px;
float:right;
height: 100vh;
}
div.section7 {
background-color:#9E9E9E;
height: 150px;
}
Floating elements need to be cleared so that elements following align correctly and do not move into the elements you have floated. Section 5 and Section 6.
Add the following class definition to your stylesheet
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
Change the following tag <div class="middle"> to <div class="middle clearfix">
HTML5 also includes <header> and <footer> elements, as well as <article> tags to make the document language more semantic. So for HTML5 you can use
<header>
<div class="section1">section 1</div>
<div class="section2">section 2</div>
<div class="section3">section 3</div>
<div class="section4">section 4</div>
</header>
And
<footer>
<div class="section7">section 7</div>
</footer>
https://jsfiddle.net/raythcael/s49o4rjz/2/
To make .section7 have a height of 150px add display: inline-block;
div.section7 {
background-color: #9E9E9E;
height: 150px;
display: inline-block;
}
See: https://jsfiddle.net/zvkxj6v8/
The reason why the height isn't working as it should is because the Div's above it is set to "float". Add "clear: both;" to div.section7 to clear the floats.
https://jsfiddle.net/2L55g0f9/1/
because section 5 and 6 are floated, you're not seeing the height of section 7. All i did was clearfix it, and you got your height :)
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
Is it possible to fill an entire page with 16 divs but still have it responsive so it can be viewed on different devices. At the moment I have only used percentages but I am open to other solutions if there are any.
-How it is suppose to look.
The webpage has to contain 16 divs in total four spread across the top first quater of the webpage four spread across the second quarter of the page four spread across the third quarter of the page and four spread across the forth quarter of the page.
So overall it is suppose to look like a big cube or look like the 2408 game http://gabrielecirulli.github.io/2048/
-My code so far
***HTML***
<!doctype html>
<head>
<link rel="stylesheet" href="master.css">
</head>
<!-- ========================================================================================================================= -->
<div id="s1" class="divq"> </div> <div id="s2" class="divq"> </div> <div id="s3" class="divq"> </div> <div id="s4" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s5" class="divq"> </div> <div id="s6" class="divq"> </div> <div id="s7" class="divq"> </div> <div id="s8" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s9" class="divq"> </div> <div id="s10" class="divq"> </div> <div id="s11" class="divq"> </div> <div id="s12" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s13" class="divq"> </div> <div id="s14" class="divq"> </div> <div id="s15" class="divq"> </div> <div id="s16" class="divq"> </div>
<!-- ========================================================================================================================= -->
***CSS***
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
.divq {
height: 25%;
margin: 0px;
width: 25%;
}
#s1 {
background-color: rgb(100,100,100);
float: left;
}
#s2 {
background-color: rgb(120,100,100);
}
#s3 {
background-color: rgb(100,120,100);
}
#s4 {
background-color: rgb(100,100,120);
float: right;
}
#s5 {
background-color: rgb(140,100,100);
float: left;
}
#s6 {
background-color: rgb(100,140,100);
}
#s7 {
background-color: rgb(100,100,140);
}
#s8 {
background-color: rgb(160,100,100);
float: right;
}
#s9 {
background-color: rgb(100,160,100);
float: left;
}
#s10 {
background-color: rgb(100,100,160);
}
#s11 {
background-color: rgb(180,100,100);
}
#s12 {
background-color: rgb(100,180,100);
float: right;
}
#s13 {
background-color: rgb(100,100,180);
float: left;
}
#s14 {
background-color: rgb(200,100,100);
}
#s15 {
background-color: rgb(100,200,100);
}
#s16 {
background-color: rgb(100,100,200);
float: right;
}
Make them all float: left, and don't forget to add box-sizing: border-box to all elements (via .divq)
That way you can add margings and paddings without breakting your grid.
If you are fine with flexbox, you can span four rows inside a wrapper with display: flex and flex-direction: column, each including four columns.
Sample Fiddle:
http://fiddle.jshell.net/n50tnnka/2/
Maybe you could try using a Bootstrap grid? It's fairly easy to use!
Just give your div's the class col-md-3. That way, the div's will know they can take up 3/12th of the screen = 25% = 4 divs per row.
If you then contain all these divs in one parent div with fixed width and height, you should be fine.
<div id="cube">
<div class="col-md-3" id="s1"></div>
<div class="col-md-3" id="s2"></div>
<div class="col-md-3" id="s3"></div>
<div class="col-md-3" id="s4"></div>
<div class="col-md-3" id="s5"></div>
<div class="col-md-3" id="s6"></div>
<div class="col-md-3" id="s7"></div>
<div class="col-md-3" id="s8"></div>
<div class="col-md-3" id="s9"></div>
<div class="col-md-3" id="s10"></div>
<div class="col-md-3" id="s11"></div>
<div class="col-md-3" id="s12"></div>
<div class="col-md-3" id="s13"></div>
<div class="col-md-3" id="s14"></div>
<div class="col-md-3" id="s15"></div>
<div class="col-md-3" id="s16"></div>
</div>
By still using the id's you can give any square the color you like, but by using bootstrap you won't have to use float.
You can do this easily with Flexbox like this
DEMO
.content {
display: flex;
height: 100vh;
width: 100vw;
flex-wrap: wrap;
box-sizing: border-box;
}
.box {
flex: 25%;
border: 1px solid black;
padding: 5px;
box-sizing: border-box;
}
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
For better browser support (than flex) you can use display table-cell for your elements
But you will have to nest each "row" (four divs) in a parent element:
HTML:
<div class="row">
<div id="s1" class="divq"> </div>
<div id="s2" class="divq"></div>
<div id="s3" class="divq"> </div>
<div id="s4" class="divq"> </div>
</div>
CSS:
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
div {
box-sizing:border-box;
}
.row{
display: table;
table-layout: fixed;
border-spacing:0px;
width:100%;
height:25%;
}
.divq {
display:table-cell;
height: 25%;
width: 25%;
}
DEMO: https://jsfiddle.net/Nillervision/06z1L5tg/
I have an issue with floating divs. I have a container st to fixed width, and I have child elements inside that which are all div elements. What I want is that, I need two elements to be shown in a row. The code that I wrote is as follows.
CSS
#container
{
width: 400px;
}
.item1
{
width: 180px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
.item2
{
width: 180px;
height: 250px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
HTML
<div id="container">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
<div class="item1">4</div>
<div class="item1">5</div>
<div class="item1">6</div>
<div class="item1">7</div>
<div class="item1">8</div>
<div class="item1">9</div>
</div>
This can be viewed at Demo1
But what I want is like this result. The only thing is that the height of the individual items can be different.
Hope I have made everything clear.
Thanks in advance
Additional clarification
The content elements will be generated dynamically in server and will be passed to the client.
Also the order should be like 1,2,3,4,...
The only thing is that in a row there should be two items and the first one should be aligned to the left side of the container.
You can't accomplish that with CSS only, but there is a jQuery plugin to do the trick. It's called jQuery Masonry, give it a try
You need a second wrapper:
<div id="container">
<div class="wrapper"><div class="item1">1</div></div>
<div class="wrapper"><div class="item1">2</div></div>
...
</div>
Float the wrapper and give it a fixed size. The items inside can have their own height.
I prefer using lists for this type of thing. Better HTML semantics.
<div class="container">
<ul>
<li><div class="item1">1</div></li>
<li><div class="item2">2</div></li>
</ul>
</div>
style:
.container ul {
width:400px;
}
.container li {
float:left;
height:200px;
width:180px;
}
If you want each pair of items to be in a row, and you have control over the dynamic generation of the content, see my edits to your fiddle here
To summarize:
Markup -
<div id="container">
<div class="itemrow">
<div class="item1">1</div>
<div class="item1">2</div>
</div>
<div class="itemrow">
<div class="item2">3</div>
<div class="item1">4</div>
</div>
<div class="itemrow">
<div class="item2">5</div>
<div class="item1">6</div>
</div>
<div class="itemrow">
<div class="item1">7</div>
<div class="item2">8</div>
</div>
<div class="itemrow">
<div class="item1">9</div>
</div>
</div>
CSS -
#container
{
width: 400px;
}
.itemrow
{
float: left;
clear: both;
}
.item1
{
width: 180px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
.item2
{
width: 190px;
height: 250px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
Edit: Just read your above comment about having to edit the server side logic for rendering. Obviously this will only work if you can control that.
you're specifying item2 to be 10 pixels wider than item1 so I'm not clear on what you're trying to do....