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
Related
I have a JS Fiddle here.
https://jsfiddle.net/h3c6jqfy/
Basically, i am trying to make a UI that has a sticky header and footer. The middle content will have three columns. Each columns will have DIVs in them. These DIVs should have 100% height and not be cut off from the footer. Within the DIV, they will have scrollable divs.
The very basic layout I created has this in it...
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>this is the end!!
The part where it says this is the end!! is never reached.
You can use flexbox without the need to calculate heights;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
height: 75px;
background: red;
}
main {
flex: 1;
background: lightgreen;
display: flex;
}
.scrolly {
flex: 1 0 33%;
overflow-y: auto;
}
.content {
height: 1000px;
}
footer {
height: 50px;
background: blue;
}
<header></header>
<main>
<div class="scrolly">
<div class="content"></div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
<div class="scrolly">
<div class="content"></div>
</div>
</div>
</main>
<footer></footer>
NOTE: See Fiddle in Full Screen
You can try using flexbox instead of defining every unit, calculate the height to avoid using the space where the footer sits, and let the children div inherit its height
<style>
body, head {overflow: hidden;}
#header,#footer,#content { position:absolute; right:0;left:0;}
#header{
height:100px; top:0; background: #4A4A4A;
}
#footer{
height:100px; bottom:0; background: #4A4A4A;
}
#content{
top:100px;
height: calc(100% - 100px);
background:#fff;
display: flex;
align-items: stretch;
}
</style>
<div>
<div id="header">HEADER</div>
<div id="content">
<div style="background-color: #ff0000; min-width: 33%; height: inherit; overflow-y: scroll;">
<div style="background-color: blue;min-height: inherit;max-width: 99%;padding: 20px 40px;">
<div style="overflow: auto; max-height: inherit; padding: 10px;">
<br>d<br>d<br>d<br>d<br>d<br>d<br>d
<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br><br>d<br>d<br>d<br>d<br>
d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
d<br>d<br>d
<br>d<br>this is the end!!
</div>
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: red;min-height: 100%;max-width: 99%;padding: 20px 40px;">
middle
</div>
</div>
<div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
<div style="background-color: pink;min-height: 100%;max-width: 99%;padding: 20px 40px;">
right
</div>
</div>
</div>
<div id="footer">FOOTER</div>
</div>
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
I want the div which displays "D" to appear beneath that one which displays "A" so that divs with matching background colours appear stacked over one another. However, I am getting this:
Where exactly in my CSS code must I clear my float?
#container {
background-color: #333333;
width: 990px;
}
#left {
background-color: red;
width: 300px;
float: left;
}
#splitter {
background-color: green;
width: 90px;
float: left;
}
#right {
background-color: blue;
width: 200px;
float: left;
}
<div id="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div id="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
You have to deal with floats and for this you need to understand what floats and BFC are :
a few ways to do this, that you should understand once you been reading a bit about floats, clearing and Block formating context.
(last example in the snippet below, oldish, even avoids the floats but does the layout)
/* DEMO purpose : Show the id or class being used on that container*/
section:before {
content: attr(id)' 'attr(class);
display: table;
background: #177EE5;
padding: 5px;
margin: 5px;
color: #fff;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
letter-spacing: 1px;
font-variant: small-caps;
}
/* your css turned into class to be valid since used for many tags */
.container {
background-color: #333333;
width: 990px;
}
.left {
background-color: red;
width: 300px;
float: left;
}
.splitter {
background-color: green;
width: 90px;
float: left;
}
.right {
background-color: blue;
width: 200px;
float: left;
}
/* wrapper for each examples */
section {
clear: both;
overflow: hidden;
margin: 1em;
}
/* different ways shown, usefull for testing only if you read about floats and dig a bit */
/* table */
.table .container {
display: table;
}
/* overflow */
.overflow .container {
overflow: hidden;
}
/* float */
.float .container {
float: left;
}
/* flex */
.flex .container {
display: flex;
}
/* inline-block */
.inline-block .container {
display: inline-block;
vertical-align: top;
}
/* last examples without floats */
/*no float & ie8 */
#table div {
float: none
}
#table #first-row,
#table > div {
display: table-row;
}
#table > div > div {
display: table-cell;
}
#table {
background-color: #333333;
width: 990px;
table-layout: fixed;
}
#left {
width: 300px;
}
#splitter {
width: 90px;
}
#right {
width: 200px;
}
#table > div > div {
background-color: red;
}
#table > div > div + div {
background-color: green;
}
#table > div > div + div + div {
background-color: blue;
}
#table:before {
display: table-caption;
width: 100%;
margin: 0;
}
#table > div:after {
content: "Notice there's a gap to fill here since cols do not cover the 990px";
display: table-cell;
}
<section class="your CSS :-: no BFC involved">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="table">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="overflow">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="float">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="flex">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="inline-block">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<p>another way without float including IE8 ?</p>
<section id="table" class="table">
<div id="first-row">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</section>
There could be more examples from the same chunks of code and floatting children.
Clear the floats in the container.
You have 3 simple ways to do that:
1. Float
#container {
clear: both;
}
2. Overflow
#container {
overflow: hidden;
}
3. Micro clearfix hack
Link
Here is what you want done bro..
this one is by using display:inline-block https://jsfiddle.net/p4domjrb/
this one is by using float:left https://jsfiddle.net/p4domjrb/1/
.container {
background-color: #333333;
width: 990px;
display: block;
position: relative;
}
.left {
background-color: red;
width: 300px;
display: inline-block;
margin-left: -4px;
}
.splitter {
background-color: green;
width: 90px;
display: inline-block;
margin-left: -4px;
}
.right {
background-color: blue;
width: 200px;
display: inline-block;
margin-left: -4px;
}
don't use id I suggest use class isntead because idis called only once.
<style>
.container{
background-color: #333333;
width:990px;
display:block;
clear:both;
}
#left{
background-color: red;
width:300px;
float:left;
}
#splitter{
background-color: green;
width:90px;
float:left;
}
#right{
background-color: blue;
width: 200px;
float:left;
}
</style>
<body>
<div class="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div class="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
</body>
result is
I'm trying to figure out how to create a fluid layout with a fixed width sidebar and fluid content area using Jeet.
HTML:
<div class="wrapper">
<div class="sidebar"></div>
<div class="content"></div>
</div>
CSS:
.wrapper {
width: 100%;
}
.sidebar {
width: 240px;
}
Looks like it is not possible with Jeet to set the content css to take rest of the layout, is it so?
You have to use define content width
HTML CODE
<div class="wrapper">
<div class="sidebar">
<div class="content-box">
Content Here !!!!
</div>
</div>
<div class="content">
<div class="content-box">
Content Here !!!!
</div>
</div>
</div>
CSS CODE
.wrapper {
color: #fff;
}
.sidebar {
width:30%;
display:inline-block;
float: right;
background: #333;
}
.content {
width: 70%;
display: inline-block;
background: #666;
}
.content-box {
padding: 20px;
}
Please check Demo Here https://jsfiddle.net/568447zu/
In my code below, case #1 works correctly. The "advice-area" div stays to the right of the "rating-box".
However, case #2 does not work when the text extends beyond one line. This causes the "advice-area" div to move below the "rating-box"
What is the best way to fix this? Thanks.
<html>
<head>
<style type="text/css">
.wrapper {
width: 400px;
list-style: none;
}
.row {
border-bottom: 1px solid #E5E5E5;
padding: 15px 0;
font-size: 14px;
clear: both;
}
.rating-box {
float: left;
height: 70px;
position: relative;
width: 60px;
}
.thumbs {
float: right;
width: 20px;
}
.number {
position: absolute;
top: 16px;
left: 5px;
}
.advice-area {
display: inline-block;
margin-left: 35px;
}
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
}
.advice-action {
display: inline-block;
}
.add-box {
display: inline;
margin-left: 30px;
}
.add-box a {
display: inline-block;
}
.share-button {
display: inline;
margin-left: 30px;
cursor: pointer;
}
.flag {
display: inline;
margin-left: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<ul class="wrapper">
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">1</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #1: This is correct</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
<li class="row">
<div class="rating-box">
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
<div class="number">2</div>
</div>
<div class="advice-area">
<div class="advice-content">Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links</div>
<div class="advice-action">
<div class="add-box">Plan</div>
<div class="share-button"> Share </div>
<div class="flag"> Flag </div>
</div>
</div>
</li>
</ul>
</body>
I'd restrict the width for the .advice-content or .advice-area div (or whatever div is around the content you're floating).
When you enter text into a floated div the div will auto-size its width accordingly, and if it expands too wide it'll automatically wrap over to the next line. Think about how wrapping works for words in text.
So, all you need to do is to restrict the width of that particular div, and it'll never grow wide enough to wrap to the next line.
Unless if you're in IE: in which case it'll do whatever the hell it wants ;)
Floating elements, rather than inline blocks, are probably what you want in this situation. I managed to get what looks like a useful outcome by moving the number div above the up/down div in the code, and then floating both to the left. I then tweaked the margins until the spacing looked decent.
CSS changes:
.number {
float: left;
}
.thumbs {
float: left;
width: 20px;
margin-left: 20px;
}
.advice-area {
margin-left: 80px;
}
HTML changes:
<div class="rating-box">
<div class="number">1</div>
<div class="thumbs">
<div> Up </div>
<div> Down </div>
</div>
</div>
limit the width on .advice-content and it will show how you want it to.
.advice-content {
font-size: 16px;
margin: 0 0 10px 0;
width:300px;
}
worked for me in IE7 & 8 / Firefox / Opera / Chrome / Safari