I have an aside (sidebar) and I'm trying to break it up into 3 sections equally.
Here's what it looks like:
This is my html:
<aside id="sidebar">
<div id="side_events">
Events
</div>
<div id="side_trailer">
Trailer
</div>
<div id="side_advertisement">
Advertisement
</div>
</aside>
This is the majority of my CSS:
* {
margin: 0px;
padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
display: block;
}
body{
width: 100%; /*always specify this when using flexBox*/
height:100%;
display: -webkit-box;
text-align:center;
-webkit-box-pack:center; /*way of centering the website*/
background-image:url('bg2.jpg');
}
#wrapper{
max-width: 850px;
display: -webkit-box; /*means this is a box with children inside*/
-webkit-box-orient:vertical;
-webkit-box-flex: 1; /*allows site to grow or shrink 1 = flex 0 = statix*/
background-color: #B137D6;
}
#body_div{
display: -webkit-box;
-webkit-box-orient:horizontal;
color:#000000;
}
#main_section{
border:1px solid blue;
-webkit-box-flex: 1;
margin: 20px;
padding: 3px;
}
#sidebar{
width: 210px;
height: 100%;
margin: 20px;
padding: 0px;
background: #999999;
border:#FF0000 1px solid;
}
#side_events,
#side_trailer,
#side_advertisement{
height:33.333%;
}
#side_events{
background:#102A50;
display:block;
}
#side_trailer{
background:#173B72;
display:block;
}
#side_advertisement{
background:#296CD0;
display:block;
}
You just need to set the #sidebar childs height to 100%/3 = 33.333%, but to achieve this you need also to set html and body tags height to 100%:
body,
html {
height: 100%;
}
#side_events,
#side_trailer,
#side_advertisement{
height:33.333%;
}
Most of the time you have to apply a 100% height to the parent DIV to get this working.
Your height of your parent element is auto and the child elements are 100%. So you need to define the parent element height in order for the child elements to be defined as 100%.
You parent element (#sidebar) has 100% height.
I wrote a jsfiddle so you could see my point of the 100% height on the parent element. The parent element is set to 100% but has nothing to derive 100% from. So I set the container in the example to a define height. http://jsfiddle.net/rtLeM/
<!-- HTML -->
<div id="container">
<aside id="sidebar">
<div id="side_events">
Events
</div>
<div id="side_trailer">
Trailer
</div>
<div id="side_advertisement">
Advertisement
</div>
</aside>
</div>
/* CSS */
#container{
height:300px;
}
#sidebar{
width:150px;
height:100%;
}
#side_events{
height:33%;
width:100%;
display:block;
background-color:#555;
}
#side_trailer{
height:33%;
width:100%;
display:block;
background-color:#999;
}
#side_advertisement{
height:33%;
width:100%;
display:block;
background-color:#333;
}
Related
I have problems placing a div within another div which has a defined height of lets say 400px.
When i set the inner div to 100% then its overlapping the outer div and goes over the outer one. Why isnt 100% height sizing the inner div to the outer divs height?
body {
min-width:300px;
}
.header {
background-color:pink;
width:100%;
height:400px;
}
.menu {
background-color: red;
}
.header-container {
color:white;
background-color:gray;
height:100%;
max-width:400px;
margin:auto;
}
.headline {
padding-right:36px;
padding-left:36px;
padding-top:54px;
padding-bottom:54px;
}
.clearfix {
clear:both;
}
<div class="header">
<div class="menu">
menu
</div>
<div class="header-container clearfix">
<div class="headline">
<span>das ist mein blog</span>
<span>this is the underline</span>
</div>
</div>
</div>
<div class="blog">
y
</div>
<div class="footer">
x
</div>
https://jsfiddle.net/g9ec4nw8/
Because the the padding on the .header-container is causing an overflow.
Adding box-sizing: border-box; to your .header-container, will fix the box-sizing issue.
But not only that, you haven't taken into account the 18px of height by your .menu.
In full, by changing your .header-container to the following code:
.header-container {
color:white;
background-color:gray;
height:calc(100% - 18px);
max-width:400px;
box-sizing: border-box;
margin:auto;
top:0;
bottom:0;
padding-right:36px;
padding-left:36px;
padding-top:54px;
padding-bottom:54px;
}
Will fix the issue.
Fiddle Here.
How can i have a fixed header with a vertical scroll-bar for my each column.
<div class="header"></div>
<div class="secondary-aside"></div>
<div class="container">
<div class="row">
<div class="col-sm-4">Title 1</div>
<div class="col-sm-4">Title 2</div>
<div class="col-sm-4">Title 3</div>
</div>
</div>
Below is my css...
html, body, .container {
height:100%;
width:100%; /*keep html and body 100% */
margin:0;
background:#e5e5e5;
}
.container {
display:table;
width: calc(100% - 260px);
border-spacing:1.5em;
}
.row {
display:table-row;
}
.col-sm-4 {
display:table-cell;
background:white;
}
.header{
background:#E5E5E5;
width:100%;
height:60px;
}
.secondary-aside{
width:260px;
background-color:#E1E1E1;
height:100%;
right:0px;
position:fixed;
}
Below is my codepen
http://codepen.io/anon/pen/lqfxt
The overflow property only applies to block and inline-block elements. In order to show the scroll bar, you'll need to change the display property from table-cell to one of the two aforementioned display properties, and then add an overflow property. You'll also need to set a specific width/height in this case.
In order to fix the header to the top, simply apply position: absolute; to the header element and give your columns a margin-top to equal the header height:
.col-sm-4 {
display: inline-block;
width: 150px;
height: 600px;
background:white;
overflow-y: visible;
margin-top: 60px;
}
.header{
background:#E5E5E5;
width:100%;
height:60px;
position: absolute;
}
Example CodePen
I'm a newbie into web designing and I am already stuck. I am using Joomla to make a website and I am trying to make divs as shown below
I saw codes that could do this by setting width in %.
What I want to do is
• Div 1 can be as wide as its contents (picture mostly) <br>
• Div 2 is the header and is usually single line <br>
• Div 3 is the body and no matter how long it is, it should not come below Div 1. So basically Div 1 should be as long as the container.
This is probably a very silly question but I have no idea how to do this.
Thank you for your time in advance.
I would not allow the sidebar to be as wide as the content. If you have images, make images fill a defined width (even if you have it be a proportion of the page, in %). The risk with this is that if your image is wider it will affect your page design.
Here is a quick example of what you are trying to achieve:
<html>
<head>
<style>
div{
display:block;
margin:0;
padding:0;
}
#div1{
float:left;
width:30%;
padding: 1%;
border:1px solid black
}
#div2{
float:right;
width: 64%;
padding:1%;
border:1px solid red
}
#div3{
float:right;
width: 64%;
padding:1%;
border:1px solid yellow
}
</style>
</head>
<body>
<div id="div1">div 1<br />This is your sidebar</div>
<div id="div2">div 2 <br /> This is your header line</div>
<div id="div3">div 3 <br />This is your body container</div>
</body>
</html>
Define width of your div's in px or em as you want multiple div section across your web page.In initial stages of web development, adjust everything in % is quite tricky.
For alignment you can refer float property of css http://css-tricks.com/all-about-floats/
With percentages: http://codepen.io/anon/pen/wEcse
percentage-based lay-out
html,body {
margin: 0;
padding: 0;
}
.container {
position: relative;
overflow: hidden;
max-width: 1140px;
margin: 0 auto;
}
.inner {padding: 20px 10px;}
.left {
float: left;
width: 25%;
}
img {
max-width:100%;
height:auto;
}
.main {
float: right;
width: 70%;
margin-left: 5%;
}
.header h1 {margin: 0;}
.content {
margin-top: 10px;
}
For images to take the full available space you can do:
img {
max-width:100%;
height:auto;
}
Pixel lay-out
http://codepen.io/anon/pen/gGapt
CSS
html,body {
margin: 0;
padding: 0;
}
.container {
position: relative;
overflow: hidden;
width: 990px;
margin: 0 auto;
}
.inner {padding: 20px 10px;}
.left {
float: left;
width: 200px;
}
.main {
float: right;
width: 700px;
margin-left: 10px;
}
.header h1 {margin: 0;}
.content {
margin-top: 10px;
}
HTML
<div class="container">
<div class="inner">
<div class="left">I am the left side.</div>
<div class="main">
<div class="header">
<h1>I am the header</h1>
</div>
<div class="content">I am the content</div>
</div>
</div>
</div>
As seen here, I am trying to recreate the solution for a sticky footer - that does not have a set height.
I have created the site in the same fashion, but it seems like the content keeps overflowing over the footer, and the footer is simply static (not so sticky!)
Obviously, this flexbox setting is constricting the 'mid section' from expanding beyond the "allowed" size (= Window - header - footer), and it won't resize to fit the content and push down the footer.
I tried changing the different settings for overflow on everything, I've tried changing the display options of the elements in the mid section and the mid section itself. I can't find the issue!!
Now I realise I can solve this a hundred different ways if I just defined the hight of the footer. But I'm trying not to.
Here is some simplified HTML to show my structure
<body class="Site">
<header><div id="header>...</div></header>
<div id="mid" class="Site-content">
<div id="links" class="fadein">
<ul><li>..</li></ul>
</div>
<div id="content" class="content fadein">
text text text
</div>
</div>
<footer>
<div id="footer"></div>
</footer>
</body>
and the relevant css
div#header {
position:relative;
display:block;
top:0px;
left:0px;
margin:0 auto 5px auto;
width:auto;
}
div#mid {
display:block;
width:100%;
height:auto;
position: relative;
background:#C69;
}
div#content {
margin-left:120px;
width:720px;
padding: 25px;
background:#0F9;
}
div#links {
position:absolute;
left:0px;
top:0px;
width:100px;
padding: 5px;
margin-left:10px;
margin-top:35px;
background:#0C6;
}
.Site {
min-height: 100%;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.Site-content {
flex: 1;
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
}
footer {
clear:both;
width:auto;
padding:10px;
}
Your ingenious solution would be much appreciated!
Check this link http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ to see how to implement sticky footer using flexbox.
And personally I am using this technique http://www.joshrcook.com/a-responsive-sticky-footer/ which is done without using flexbox.
<body>
<div class="container">
<!-- content here -->
<footer>
<!-- content for footer -->
</footer>
</div>
</body>
And for the CSS is pretty simple
html,
body {
height: 100%;
}
.container {
display: table;
height: 100%;
width: 100%;
}
footer {
display: table-row;
height: 1px;
}
Hope this help.
I have two divs:
<div id="left_menu" > menu </div>
<div id="content" > centered </div>
Currently they have a css of
#content {
margin-left:auto;
margin-right:auto;
display:table;
}
So this would create a div with menu and a line below that a centered div with centered. What I want is a centered div#content with div#left_menu to the left of it. I DON'T want to center BOTH the divs together, only the div#content. This should be done with only divs and css and should work on all browsers.
So this could possibly look like
---> menu centered <--------
Just to clarify things:
I'm not centering/positioning the text, it's the divs that matter (text is there for marking the position in the example). I want both divs on the same line (like a span, but i want to use divs), the centered div should be centered in the middle of the page. The menu div should be right next to it, touching the left border of the centered div.
This solution should work for every screen size (e.g. if the screen is very large the two side gaps to the left and right of the menu and content should be very large, e.g. if the screen is too small for both the menu and content, there should be no gaps and the result should look like (the >< represent the cutoff) Notice how if the screen is too small, the menu div is fully displayed first with the centered div cutoff (as if it were just two divs floated left).
>menu cent<
Due to the number of incorrect answers being submitted:
1) Please verify your answers by creating your own .html file with your code
2) Refresh once on full screen and refresh once with browser resized to a smaller size such that the browser cannot hold both divs (e.g. the centered div is semi-cutoff)
3) Use inspect element tool(chrome) or equivalent tools to be sure that the two divs are touching, the centered div is indeed centered, etc
To further clarify what i want i've included a better example(NOT a solution though):
This does not work for every screen size:
http://jsfiddle.net/prt38/2/
Updated per requests in comments.
I really like using the vertical-align property when vertically-aligning elements.
HTML:
<div id="container">
<span id="alignment"></span><div id="wrapper">
<div id="sidebar">
</div><div id="main">
</div>
</div>
</div>
Notice how the closing and the succeeding are touching. For inline and inline-block elements to touch, there cannot be space between them in the markup.
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
text-align: center; }
#container { white-space: nowrap; }
#wrapper {
white-space: nowrap;
text-align: left;
margin: 0 75px 0 0;
vertical-align: middle;
display: inline-block; }
#alignment {
height: 100%;
vertical-align: middle;
display: inline-block; }
#sidebar {
background: red;
width: 75px;
height: 200px;
vertical-align: middle;
display: inline-block; }
#main {
background: blue;
width: 300px;
height: 400px;
vertical-align: middle;
display: inline-block; }
Preview: http://jsfiddle.net/Wexcode/2Xrcm/8/
Your do it with simple overflow:hidden like this:
#left_menu{
float:left;
width:200px;
height:100px;
background:green;
}
#content {
margin-left:auto;
margin-right:auto;
display:table;
height:100px;
background:red;
overflow:hidden;
}
http://jsfiddle.net/hnXqg/
The solution for this is you have to create a wrapper class or id for a div like..
<div id="wrapper">
<div id="left_menu" > menu </div>
<div id="right">
<div id="content" > centered </div>
</div>
</div>
then the css is..
#wrapper{
margin:0px auto;
display:table;
width:90%;
}
#menu{
float:left;
width:300px;
margin:5px;
}
#right{
float:right;
display:block;
}
#content{
displat:table;
margin:0px auto;
}
I think this css should do the job, if I understood your question:
#left_menu{background:red;
width:100px;
height:100px;
float:left;
margin: auto 0;
z-index:2}
#content {
background:white;
width:100px;
height:100px;
margin: auto 0;
float:left;
position:absolute;
left:20%;
z-index:200;
padding-left:4%
}
And Html is below:
<div id="left_menu" >RED DIV</div>
<div id="content" >WHITE DIV</div>
I think this is what you are looking for. Adjust the sizes to suit your needs, obviously.
<style type="text/css">
.container {
margin: auto;
width: 500px;
}
.menu {
margin: 10px;
width: 180px;
}
.content {
margin: 10px;
width: 280px;
text-align: center;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content floatLeft">
Content
</div>
<div class="clear"></div>
</div>
Edited:
<style type="text/css">
.container {
margin: auto;
width: 500px;;
background: red;
}
.menu {
width: 50px;
margin-left: 50px;
background: green;
}
.content {
width: 300px;
margin: auto;
background: blue;
}
.floatLeft {
float: left;
}
.clear {
clear: both;
}
</style>
<div class="container">
<div class="menu floatLeft">
Menu
</div>
<div class="content">
Content
</div>
<div class="clear"></div>
</div>
<div align="center">
<span id="left_menu"> menu </span>
<span id="content"> centered </span>
</div>
html { text-align: center; }
div#content { display: inline; margin: 0 auto; text-align: left;width: 980px; }
something like this should work.