Please see this Fiddle:
https://jsfiddle.net/vdb9y2m0/
HTML:
<div class="header">
<div class="container">
Testcontent in centered container
</div>
</div>
<div class="body">
<div class="sidebar">
Content (text) should start at header container
</div>
<div class="content">
Rest of the content, should end at header container
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
.header {
width: 100%;
height: 200px;
background: orange;
}
.container {
width: 600px;
margin: 0px auto;
border-left: 1px solid red;
height: 200px;
border-right: 1px solid red;
}
.sidebar {
width: 30%;
background: #FFF;
float: left;
padding: 20px 20px;
}
.content {
width: 70%;
background: darkblue;
color: #FFF;
padding: 20px 20px;
display: inline-block;
}
I would like to start the content of the left div in the body at the start of the container in the header - and end the div of the main content (darkblue) at the end of the container.
Like so:
If this possible, without using some ugly Javascript hack? Thanks in advance!
Related
I'm facing a css problem realted to inline-div.
When the text(or sentece) is long, the inline div pushes down as on the image below:
But, when I add a line break, It works perfectly.
How can I make it work without having to use <br>? The main content to be posted is dynamic and it also needs to be responsive.
Thanks
Please Note: This is a simplified version of my actual code. In the
actual code the width of the main container is 100%
HTML
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>
CSS
body{
width: 350px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
}
#firstDiv{
border: 10px solid brown;
display:inline-block;
width: 70px;
overflow:hidden;
vertical-align:top;
}
#secondDiv{
border: 10px solid skyblue;
float:left;
width: 70px;
}
#thirdDiv{
display:inline-block;
border: 5px solid yellowgreen;
vertical-align:top;
}
use : white-space: nowrap; for the div containing the long sentences.
You can use flexbox. Just add
#container {
display: flex;
}
body {
width: 350px;
margin: 0px auto;
}
#container {
display: flex;
border: 15px solid orange;
}
#firstDiv {
border: 10px solid brown;
display: inline-block;
width: 70px;
overflow: hidden;
vertical-align: top;
}
#secondDiv {
border: 10px solid skyblue;
float: left;
width: 70px;
}
#thirdDiv {
display: inline-block;
border: 5px solid yellowgreen;
vertical-align: top;
}
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>
I am trying to create a site with a frame that fills all the vertical space, e.g. becomes smaller and overflowing content becomes scrollable.
html and body height are set to 100vh and all of the boxes parents are set to 100%. I have not found another method and this results in every single parent being 100vh and ultimately the site overflowing.
What am I doing wrong?
I feel like a am just missing the right "position: " attributes...
<!DOCTYPE html>
<html>
<head>
<title>Pastebook</title>
<style type="text/css">
html,
body {
height: 100vh;
}
/*central panel*/
.central {
position: absolute;
width: 100%;
margin: 0 auto;
height: 100%;
border: 3px solid blue;
}
/*central middle panel*/
.middle {
margin: 0 auto;
max-width: 970px;
height: 100%;
border: 3px solid yellow;
}
/*content panel*/
.contentPanel {
margin: 0 auto;
padding-top: 0px;
height: 100%;
border: 3px solid lightgreen;
}
/*Clipboard Box*/
.clipboard {
border-radius: 5px;
border: 5px solid gray;
font-size: 100%;
overflow: auto;
padding: 5px;
height: 100%
}
/*Example content*/
.content {
height: 100px;
background: lightgray;
margin: 5px;
}
</style>
</head>
<body>
<div class="central">
<div class="content">
central
</div>
<div class="middle">
<div class="content">
middle
</div>
<div class="contentPanel">
<div class="content">
content
</div>
<div class="clipboard">
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I tried some changing and this works
html,
body {
height: 100vh;
padding:0;
margin:0;
overflow:hidden;
}
/*central panel*/
.central {
position: absolute;
width: 100%;
margin: 0 auto;
height: 100vh;
border: 3px solid blue;
box-sizing: border-box;
overflow:scroll;
}
/*central middle panel*/
.middle {
margin: 0 auto;
max-width: 970px;
border: 3px solid yellow;
box-sizing: border-box;
}
/*content panel*/
.contentPanel {
margin: 0 auto;
padding-top: 0px;
border: 3px solid lightgreen;
box-sizing: border-box;
}
/*Clipboard Box*/
.clipboard {
border-radius: 5px;
border: 3px solid gray;
box-sizing: border-box;
font-size: 100%;
overflow: scroll;
padding: 5px;
}
/*Example content*/
.content {
background: lightgray;
margin: 5px;
}
tell me if something doesn't work or if I did something wrong :)
edit: okay so I looked into it a bit further and you can
use flex boxes (which I do not like for no reason)
javascript(which is an even worse solution but also works)
css calc() function(I included this one at the bottom)
this will work better with a css addon that lets u use heights of
other elements inside the calc() function
html,
body {
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
}
/*central panel*/
.central {
width: 100%;
margin: 0 auto;
height: 100vh;
border: 3px solid blue;
box-sizing: border-box;
overflow: hidden;
}
/*central middle panel*/
.middle {
margin: 0 auto;
max-width: 300px;
border: 3px solid yellow;
box-sizing: border-box;
height: calc(100vh - 55px);
overflow: hidden;
}
/*content panel*/
.contentPanel {
margin: 0 auto;
padding-top: 0px;
border: 3px solid lightgreen;
box-sizing: border-box;
height: calc(100vh - 110px);
overflow: hidden;
}
/*Clipboard Box*/
.clipboard {
border-radius: 5px;
border: 3px solid gray;
box-sizing: border-box;
overflow: scroll;
padding: 5px;
height: calc(100vh - 165px);
}
/*Example content*/
.content {
background: lightgray;
margin: 5px;
height: 40px;
}
<!DOCTYPE html>
<html>
<head>
<title>Pastebook</title>
</head>
<body>
<div class="central">
<div class="content">
central
</div>
<div class="middle">
<div class="content">
middle
</div>
<div class="contentPanel">
<div class="content">
content
</div>
<div class="clipboard">
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
<div style="height:400px; background: lightgray; margin:5px;">
clipboard
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Try
.central
{
overflow-y: auto;
}
If a user is signed up to my site, in their login area I have 3 divs as follows:
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
These divs all have a width of 32% and sit inline with each other.
#psts-cancel-link {
background: white;
border-left: 3px solid #ccc;
padding: 1em;
width: 32%;
min-height: 270px;
float: left;
}
.psts-receipt-link {
background: white;
border-left: 3px solid #ccc;
min-height: 270px;
float: left;
width: 32%;
margin: 0 10px;
padding: 20px;
}
#psts-signup-another {
background: white;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
width: 32%;
min-height: 270px;
float: left;
}
When a user is not signed up, only one of the divs displays:
<div id="psts-signup-another"></div>
Is it possible to change the styling of this so that it's width is 100% when div1 and div2 aren't displayed?
So far I have tried this, but with no success:
#psts-cancel-link ~ .psts-receipt-link ~ #psts_existing_info #psts-signup-another {
width:100%;
}
Table Layout Implementation
Use a table layout. Specify display: table on the parent and display: table-cell on the child elements.
#psts-cancel-link {
background: tomato;
border-left: 3px solid #ccc;
padding: 1em;
min-height: 270px;
display: table-cell;
word-wrap: break-word;
}
.psts-receipt-link {
background: lightblue;
border-left: 3px solid #ccc;
min-height: 270px;
margin: 0 10px;
padding: 20px;
display: table-cell;
word-wrap: break-word;
}
#psts-signup-another {
background: tomato;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
min-height: 270px;
display: table-cell;
word-wrap: break-word;
}
.container {
display: table;
width: 100%;
table-layout: fixed;
}
Logged in
<div class="container">
<div id="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">
<div id="psts-signup-another"></div>
</div>
Flexbox Layout Implementation
You can also use flexbox which expands and shrinks the child items according to the parent container.
#psts-cancel-link {
background: tomato;
border-left: 3px solid #ccc;
padding: 1em;
min-height: 270px;
flex: 1;
}
.psts-receipt-link {
background: lightblue;
border-left: 3px solid #ccc;
min-height: 270px;
margin: 0 10px;
padding: 20px;
flex: 1;
}
#psts-signup-another {
background: tomato;
padding: 1em;
border-left: 3px solid #ccc;
margin-bottom: 30px;
min-height: 270px;
flex: 1;
}
.container {
display: flex;
}
Logged in
<div class="container">
<div id="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logged out
<div class="container">
<div id="psts-signup-another"></div>
</div>
You could simply use :first-child if it's indeed the only child in the second case.
#psts-signup-another:first-child {}
You can use the adjacent selector. Have a look at the following snippet:
#psts-signup-another {padding: 5px; background: #f99;}
div + div + #psts-signup-another {padding: 5px; background: #99f;}
<h2>Div when three divs are present</h2>
<div class="theDivs">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
<h2>Div when three divs are not present</h2>
<div class="theDivs">
<div id="psts-signup-another"></div>
</div>
i think you should use another container div with a new class when user logout.
Logged:
<div class="container">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
Logout:
<div class="container logout">
<div id="psts-cancel-link" class="psts-cancel-link"></div>
<div class="psts-receipt-link"></div>
<div id="psts-signup-another"></div>
</div>
CSS:
.container.logout > div {
display:none;
}
.container.logout > .psts-signup-another {
display:block;
}
I would like to create a header that streatches with the page width.
My header consists of three parts, two sides with fixed width and the middle that stretches.
<div class="bigBlueBox">
<div class="headerBox">
<div class="leftSide"></div>
<div class="middleSide"></div>
<div class="rightSide"></div>
</div>
</div>
I use display: box and box-flex: 1 for the stretching of the middle box.
body {
margin: 0;
padding: 0;
}
.bigBlueBox {
height: 45px;
width: 100%;
background-color: blue;
}
.headerBox {
border: 1px solid red;
color: #FFFFFF;
display: -moz-box;
font-weight: bold;
height: 45px;
margin: auto;
width: 100%;
}
.leftSide {
border: 1px solid yellow;
display: inline-block;
float: left;
height: 45px;
width: 20px;
}
.middleSide {
-moz-box-flex: 1;
display: inline-block;
float: left;
height: 45px;
}
.rightSide {
border: 1px solid green;
display: inline-block;
float: left;
height: 45px;
width: 20px;
}
My problem is that, as you can see in this fiddle, there's a margin I can't get rid of (the red border is not around the blue box).
How can I remove this "margin" ?
Otherwise, is there another way to do it without using boxes ?
Well the solution was very simple, I just had to add some content inside the middle div:
<div class="bigBlueBox">
<div class="headerBox">
<div class="leftSide"></div>
<div class="middleSide"> SOMETHING </div>
<div class="rightSide"></div>
</div>
</div>
Which could also be
To make this easy, say you had a div that was 100px wide, and 3 divs inside of it each 20px wide. How can I align them to where they align to the center of the div leaving a 20px; gap on each side?
Center some HTML elements always depends of your project and integration dependencies...
You may be happy with these 2 solutions, display: inline-block; and float: left;
Both have pros & cons, hope that it can help you !
http://jsfiddle.net/HP2DS/1/
<!-- Inline-block -->
<div id='container'>
<div class='centered' id='content-left'></div><div class='centered' id='content-center'></div><div class='centered' id='content-right'></div>
</div>
#container {
width: 100px;
height: 80px;
text-align: center;
background: cyan;
}
#container .centered {
display: inline-block;
width: 20px;
height: 100%;
margin: auto;
background: magenta;
border: 1px solid black;
box-sizing: border-box;
}
<!-- Floating -->
<div id='container-2'>
<div class='centered' id='content-2-left'></div>
<div class='centered' id='content-2-center'></div>
<div class='centered' id='content-2-right'></div>
</div>
#container-2 {
width: 60px; /* 60px + 2*20px of padding... */
height: 80px;
padding: 0 20px;
text-align: center;
background: cyan;
}
#container-2 .centered {
float: left;
width: 20px;
height: 100%;
margin: auto;
background: magenta;
border: 1px solid black;
box-sizing: border-box;
}
Good day! Here is how I implemented it:
HTML
<div id="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
CSS
#container {
width: 100px;
height: 100px;
border: 1px solid red; /** for viewing purposes **/
text-align: center; /** center the divs **/
font-size: 0; /** remove the unwanted space caused by display: inline-block in .child **/
}
#container .child {
display: inline-block; /** set the divs side-by-side **/
vertical-align: top;
width: 20px;
height: 100px;
font-size: 12px; /** override font-size: 0 of #container, so that text will be visible again **/
text-align: left; /** set text in the .child divs back to normal alignment **/
border: 1px solid blue; /** for viewing purposes **/
box-sizing: border-box;
}
I hope this helps. Cheers! :)