Well, as it is shown on the screenshot I've linked below, there's a problem with centering this div containing two Tumblr posts columns. I want to have it centered in the part of the page, where no sidebar is given. Moreover, I would like to make posts in two columns following each other without any space. IMG: http://i.stack.imgur.com/VLkkr.jpg
CSS:
body {
margin: 0px;
background-color: antiquewhite;
text-align: center;
word-wrap: break-word;
}
body #content {
width: 900px;
display: inline-block;
margin: 15px 15px 15px 15px;
}
body #content #wrapper {
display: inline-block;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
body #content #wrapper #posts {
display: inline-block;
background-color: white;
width: 400px;
margin: 0 15px 15px 0px;
padding: 10px;
float: left;
text-align: left;
}
body .sidebar {
display: table;
width: 250px;
height: 100%;
position: fixed;
top: 0px;
right: 0px;
}
body .sidebar .sidebar-inside {
display: table-cell;
max-width: 250px;
margin: 0 auto;
vertical-align: middle;
}
/* etc */
HTML:
<!-- These two columns -->
<div id='content'>
<div id='wrapper'>
{block:Posts}
<div id='posts'>
{block:Photo}
<!-- Here are posts. -->
</div>
{/block:Posts}
</div>
</div>
<!-- Sidebar -->
<div class='sidebar'>
<div class='sidebar-inside'>
</div>
</div>
Help me out, guys! Please!
Maybe a solution (for one thing) with CSS3 Column: (and do not use mulitple times the id atrribute.. use classes.. )
body #content #wrapper {
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;
-moz-column-gap:405px;
-webkit-column-gap:405px;
column-gap:405px;
}
body #content #wrapper #posts {
<strike>float: left;</strike> /*delete this one..*/
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}
Edit: user ask for more..
the reason is that the sidebar is position:absolute; so it does not count in space available for centering..
place this just behind </div> from wrapper
<div class="Gh2"></div>
.Gh2 {
width: 250px; /*sidebar width*/
float: right; /*place it to the right where sidebar is*/
height: 1px; /*need some height..*/
}
than:
body #content {
/* width: 900px; deleted those unwanted settings*/
/* display: inline-block; deleted those unwanted settings*/
margin: 15px 15px 15px 15px;
}
Related
At the top level of my website layout are 4 div tags.
The first one is a full width header section, with css:
#header {
margin-top: 0px;
height: 70px;
border: 4px double rgb(255,255,255);
border-radius: 20px;
background: rgb(88,150,183) no-repeat fixed left top;
padding: 0px;
}
At the bottom is a full width footer:
#footer {
clear: both;
margin: 0px;
color:#cdcdcd;
padding: 10px;
text-align: center;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
On the left is my main menu section:
#categories {
float:left;
width:150px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
All of those 3 elements work fine. They're in the right place and that doesn't change whatever screen resolution the user has on their monitor, or whether they view it on not maximum screen size.
My problem is with the main element of the page - where all the interesting stuff is. It's directly to the right of the menu div - or rather, it should be. My css is:
#main {
float:right;
min-height: 440px;
width: 80%;
margin-bottom: 20px;
padding:20px;
border: 4px double rgb(88,150,183);
border-radius: 20px;
}
width 80% works OK for most of my users, but for those with less resolution, the main element shifts below the menu, which is ghastly.
What I would ideally like is for the width set in the css #main to be something like (100% - 170px), thus leaving a nice margin between the menu and the main bit at all times and never pushing it below the menu. However, css standards don't fulfil that desire yet!
Could someone suggest how I amend my css to give me a nice clean page that's clean for all my users? Or do I need to go back to setting out my page using tables?
Using CSS3 flex
* { box-sizing: border-box; margin: 0; }
#parent{
display: flex;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
flex: 1; /* You... fill the remaining space */
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Using CSS3 calc
width: calc(100% - 170px);
Example:
* { box-sizing: border-box; margin: 0; }
#aside {
background: #1CEA6E;
width: 170px;
float: left;
padding: 24px;
}
#main {
background: #C0FFEE;
width: calc(100% - 170px);
float: left;
padding: 24px;
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using float: left; and overflow
* { box-sizing: border-box; margin: 0; }
#aside{
width: 170px; /* You, be fixed to 170 */
float: left; /* and floated to the left */
padding: 24px;
background: #1CEA6E;
}
#main {
background: #C0FFEE;
padding: 24px;
overflow: auto; /* don't collapse spaces */
/* or you could use a .clearfix class (Google for it) */
}
<div id="aside">Aside</div>
<div id="main">Main</div>
Using style display: table;
* { box-sizing: border-box; margin: 0; }
#parent{
display: table;
border-collapse: collapse;
width: 100%;
}
#parent > div {
display: table-cell;
}
#aside{
width: 170px; /* You, be fixed to 170 */
background: #1CEA6E;
padding: 24px;
}
#main{
background: #C0FFEE;
padding: 24px;
}
<div id="parent">
<div id="aside">Aside</div>
<div id="main">Main</div>
</div>
Is this what you are looking for? You don't need any css3
Dont need any css3
.wrapper {
width: 800px;
height: 800px;
background-color: blue;
}
.content {
width: auto;
height: 100%;
background-color: yellow;
}
.menu {
width: 170px;
height: 100%;
float: left;
background-color: red;
}
<div class="wrapper">
<div class="menu">Menu</div>
<div class="content">
Aside
</div>
</div>
You can use 'calc' function supported by all modern browsers and IE9+, or switch to flexbox (supported by IE11+)
See this pen: https://codepen.io/neutrico/pen/MyXmxa
width: calc(100% - 170px);
Keep in mind that all borders matter unless you set 'box-sizing' to 'border-box' (or just remove these borders and apply them on child elements).
Not very good at this just starting but I just can't center these divs can someone HELP :/ I have looked online but have not found anything that will work with it... i'm only 12 and it's all quite new to me.
*{
margin: 0px;
padding: 0px;
}
#Title{
height:75px;
width:60%;
margin-top:5%;
background-color:black;
display: table;
margin-left: auto ;
margin-right: auto ;
}
#Wallpaper{
width:15%;
height:250px;
background-color:black;
display: inline-block;
margin-top:5%;
margin-left: auto ;
margin-right: auto ;
float:center;
}
#Logo{
width:15%;
height:250px;
background-color:black;
display: inline-block;
margin-top:5%;
margin-left: auto ;
margin-right: auto ;
float:center;
}
#YoutubeBanner{
width:15%;
height:250px;
background-color:black;
display: inline-block;
margin-top:5%;
margin-left: auto ;
margin-right: auto ;
float:center;
}
Here is one way of doing this, it's responsive and fluid.
DEMO: https://jsbin.com/puhixo/1/
CSS
body,
html {
margin: 0;
padding: 0;
background: #fff;
font: 1em/1.5 sans-serif;
}
.row,
.column {
box-sizing: border-box /*so padding and borders are included in width */
}
.row {
word-spacing: -1em; /* fix the inline block extra space issue */
letter-spacing: -1em; /* fix the inline block extra space issue */
overflow: hidden;
text-align: center;
padding: 0 20px;
width: 100%;
max-width: 1200px;
margin:0 auto;
}
.column {
vertical-align: top;
word-spacing: normal; /* reset child */
letter-spacing: normal; /* reset child */
display: inline-block;
border: 1px solid red;
width: 100%; /* the size UNDER the min-width in the media query*/
padding: 10px;
text-align: left; /* reset child */
}
#media (min-width:500px) {
.column {
width: 33.333%;
max-width: 250px; /* the max-width */
}
}
HTML:
<div class="row">
<div class="column">
Column 1 text goes here. Text goes here for column 1.
</div>
<!--/.column -->
<div class="column">
Column 2 text goes here. Text goes here for column 1.
</div>
<!--/.column -->
<div class="column">
Column 3 text goes here. Text goes here for column 1.
</div>
<!--/.column -->
</div>
<!--/.row -->
You can also write code like this.
html
<center>
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
</center>
css
div
{
display: inline-block;
border: 1px solid red;
}
div.wrapper {
-webkit-column-count: 3;
/* Chrome, Safari, Opera */
-moz-column-count: 3;
/* Firefox */
column-count: 3;
width: 80%;
border: 1px solid black;
text-align: center;
margin: 0 auto;
}
<div class="wrapper">
<div>Hi you</div>
<div>Yes you</div>
<div>Yup</div>
</div>
Would something like this work for you?
<section id="main-content">
<div class="language-box html">HTML</div>
<div class="language-box javascript">JAVACRIPT</div>
<div class="language-box css">CSS</div>
<div class="language-box php">PHP</div>
<div class="clear"></div>
</section>
I'm trying to make this 4 box's become centralized and side by side.
I'm using this code, but it's not working as i hope:
#main-content {
margin: 0 auto;
}
.language-box {
width: 279px;
height: 400px;
background-color: white;
float: left;
margin: 0 auto;
}
http://i.imgur.com/V2DPlRa.png
You could remove float, display items as inline-block and set text-align: center to the container.
#main-content {
margin: 0 auto;
text-align: center;
width: 100%;
}
.language-box {
width: 80px;
border: 1px solid #000000;
height: 400px;
background-color: white;
/* float: left;
margin: 0 auto; */
display: inline-block;
}
Fiddle: http://jsfiddle.net/9k2ae5vv/
You need to clear after float elements:
#main-content {overflow: hidden}
you must set width for your wrapper, and everything will be fine.
#main-content {
margin: 0 auto;
width: calc(4 * 279px);
}
look working example
My current page is leaving small blank area near footer. Not sure what causing the problem. Below is my code:
<link rel="stylesheet" type="text/css" href="style/test_style.css">
<body>
<div id="header">
</div>
<div id="navigation">
<ul>
<li>test</li>
</ul>
</div>
<div id="main">
<div id="sidebar">
this is a test
</div>
</div>
<div id="footer"></div>
</body>
test_style.css:
body {
margin: 0; }
#header {
text-align: left;
margin: 0 auto;
height: 50px;
background: #ccccff; }
#header h1 {
margin: 0;
padding: 1em; }
#main {
margin: 0;
padding: 0;
float: top;
height: 700px;
width: 100%;
background: #009999; }
#sidebar {
float: left;
height: 100%;
width: 150px;
background: #999900;
}
#footer {
clear: left;
margin: 0 auto;
height: 50px;
background-color: #666600;
padding: 20px; }
#navigation {
float: left;
width: 100%;
background: #333; }
#navigation ul {
margin: auto;
padding: 0; }
#navigation ul li {
list-style-type: none;
display: inline; }
#navigation li a {
display: block;
float: right;
color: #ffff99;
text-decoration: none;
border-left: 1px solid #fff;
padding: 5px; }
#navigation li a:hover {background: #383}
There are two options:
1) Change float: top; to float: left; for #main:
#main {
margin: 0;
padding: 0;
float: left;
height: 700px;
width: 100%;
background: #009999;
}
2) Add clear: both; to #main:
#main {
clear: both;
}
The reason it isn't working as you have it, is that you've floated the element within #main (the #sidebar) to the left, which sort of messes up the structure of the #main div. That means that #sidebar is placed just below the element above (#navigation) while #main is placed at the very top of the page (behind #navigation, so the top is not visible) causing it to not come down as far as the #sidebar div.
Just to exemplify: Another way to do it would be to add the height of #navigation (which in my browser is 28px) to the padding of #main, so:
#main {
padding-bottom: 28px;
}
Add float:left; to your #main
#main {
float:left;
margin: 0;
padding: 0;
float: top;
height: 700px;
width: 100%;
background: #009999; }
Please see: http://jsfiddle.net/cNZ46/1/
Here (link) is a fixed code with both HTML and CSS changes.
Notice that I moved #sidebar out from the #main so that they're apart from each other. Also I changed footer's clear to both which fixed the whitespace above it.
<div id="main">
<p>Main content here!</p>
</div>
<div id="sidebar">
<p>Sidebar here!</p>
</div>
I've set up a min-height to both, sidebar and main area, just to show you it works.
I have a three column layoyut - left, middle and right.
<div id="content-area" class="clearfix">
<div id="content-left"><img src="fileadmin/billeder/logo.jpg" width="180" height="35" alt=""></div>
<div id="content-middle"><f:format.html>{content_middle}</f:format.html></div>
<div id="content-right">
<f:format.raw>{navigator}</f:format.raw>
<f:format.raw>{content_right}</f:format.raw>
</div>
</div>
with this CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-area {
padding: 10px 0;
margin: 5px auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
width: 600px;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
text-align: left;
}
Left is 180px, middle is 600px and right is 180px, making it a 960px layout, like this.
http://jsfiddle.net/kxuW6/
For the most part, this works as intendend, but I want the middle column to have a somewhat flexible width according to the content in the right column.
It I put a image in the right column that have a width of 360px, the middle column will be 420px wide.
My problem is that an image with a width more than 180px, fx. 360px, will break the floating of the columns, as per this fiddle
http://jsfiddle.net/5hNy5/
I want it to it to be like this fiddle, but without the fixed width in the middle column.
http://jsfiddle.net/Eqwat/
Use display: table-cell instead of floats...
If you are supporting the more mordern browsers, you can try:
#content-area {
width: 960px;
padding: 10px 0;
margin: 5px auto;
display: table;
border: 1px dashed blue;
}
#content-left {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
}
#content-middle {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
text-align: left;
padding: 0 10px;
line-height: 20px;
}
#content-middle p {
margin-top: 10px;
}
#content-right {
display: table-cell;
border: 1px dotted blue;
vertical-align: top;
width: 180px;
height: 200px;
text-align: left;
}
The width value for a table-cell acts like a mininum value, so the left and right columns will expand if you insert an image into eithe one and the middle column will adjust to take up the remaining width.
See demo at: http://jsfiddle.net/audetwebdesign/V7YNF/
The shortest form that should solve the above:
HTML:
<div class="area">
<div class="side"></div>
<div>Some content here</div>
<div class="side"></div>
</div>
CSS:
<!-- language: CSS -->
.area {
width: 100%;
display: table;
}
.area > *{
display:table-cell;
}
.side {
width: 100px;
background-color:gray;
}
See this fiddle.
If you are fine with shuffling the source order of the columns, you can relegate #content-middle to the bottom and give it display: block and overflow: hidden.
Markup:
<div id='all-wrapper'>
<div id="content-area" class="clearfix">
<div id="content-left"></div>
<div id="content-right"></div>
<div id="content-middle"></div>
</div>
</div>
CSS
#all-wrapper {
width: 960px;
margin: 0 auto;
}
#content-left {
float: left;
width: 180px;
min-height: 400px;
}
#content-middle {
display: block;
overflow: hidden;
}
#content-right {
float: right;
min-width: 180px;
min-height: 200px;
}
Now the middle-column will take up the available space when the right-column's width changes.
Demo: http://dabblet.com/gist/7200659
Required reading: http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/