I'm currently using 1 table to align 2 main portions of the site. It's causing problems for me now, so I'd like to use pure CSS.
I have a 205px wide navbar column on the left. Occupying the rest of the space on the right, I'd like to have a container (So on the right side of the screen, taking up screen width - 200 pixels) This container would not have a fixed height, but I want its top to be aligned with the top of the navbar.
Here's a demo of what I currently have .
I would like the solution to be similar to that, but not use tables, and have the top of the container aligned with the top of the sidebar.
I've made several attempts at doing this (before I started using the table, and after) but none of them even remotely worked. I've come here as a last resort, so I hope that someone could help.
Fiddle
.container{height: 100%; border: 1px solid #0f0; display: table;}
#sidebar{
width:40%; height: 100%; display: table-cell; background: #ccc;
}
#sidebar2{
width:60%; height: 100%; display: table-cell; background: #f00;
}
body, html {
height:100%;
}
HTML
<div class="container">
<div id="sidebar">links and whatnot go here</div>
<div id="sidebar2">this is the container (but its top is not aligned with the sidebar as I would like)</div>
</div>
Note: table-cell property is supported by supports IE8+
EDIT:
If you can't use table-cell then you have to use some jquery to calculate height. Check this Fiddle
I would do something like this:
. HTML:
<div id="container">
<aside id="sidebar">Links and whatnot</aside>
<section id="content">Content and whatnot</section>
</div>
. CSS:
html, body {
width: 100%;
height: 100%;
}
div#container {
height: 100%;
}
aside#sidebar {
background-color: #f00;
width: 205px;
min-height: 100%;
float: left;
}
section#content {
background-color: #0f0;
min-height: 100%;
}
You can see it working in this fiddle.
Related
I would like to place two divs within a container side by side and - thanks to SO - I feel I'm almost there, but there is something I really don't understand.
The html looks like this:
<div class="parent">
<div class="font" id="left"></div>
<div class="font" id="right"></div>
</div>
CSS looks like this:
body {
margin: 0;
}
#left {
width: 50%;
background: lightblue;
display: inline-block;
height: 100%;
}
#right {
width: 50%;
background: orange;
display: inline-block;
height: 100%;
}
.parent{
font-size:0;
margin: 0;
height: 40px;
}
.font{
font-size:16px;
}
font-size needs to be 0 to account for the whitespaces. display is set at inline-block (I'd rather use display than float).
This works fine. It keeps working when I add content to both the left and the right block. However, when I add content to only one block, this block gets strangely offset from the top. It's like adding margin-top: 50px or something. And I don't get why.
Here's the JSFiddle with content in the left block: https://jsfiddle.net/dave_s/phon1tws/
I've also tried overflow:hidden, but that shrinks the block with the content.
Any help would be much appreciated! Also if someone could explain to me what happens here, that'd be really great!
Thanks a lot!
One way is do use flexbox. Codepen example. Note the support for flexbox and use prefixes.
.parent {
display: flex;
}
add this in css
#left, #right{float:left;}
Alternatively, you can use CSS tables. Your mark-up lends itself nicely to the technique.
The main advantage is that you don't have to alter the font sizes to compensate for the white space that can show up between inline blocks.
Having said that, both approaches will work in your situation.
body {
margin: 0;
}
.parent {
display: table;
width: 100%;
height: 40px;
}
#left, #right {
display: table-cell;
vertical-align: top;
width: 50%;
height: 100%;
}
#left {
background: lightblue;
}
#right {
background: orange;
}
<div class="parent">
<div class="font" id="left">Left Blue</div>
<div class="font" id="right">Right Orange</div>
</div>
Take a look to this really nice guide about Flexbox. Nowadays it's the clearest way to build a layout.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This will work:
.font {
font-size: 16px;
vertical-align: top;
}
By default baselines are vertically aligned. If the <div> is empty, its bottom line will be its baseline. Otherwise the baseline of the first line of text is the baseline to be aligned with.
This problem exists even when there are words in both <div>s but having different font-sizes.
In a Nutshell:
This is what i want to achieve: https://jsfiddle.net/Pintolus/faz88ayh/33 (you have to resize the result window to see the effect) but the #Content Div should fill out the rest of the screen-space next to the #Sidebar.
The Sidebar should still move UNDER the #Content on small screens.
This is what i want to achieve:
There should be 3 divs:
#Sidebar, which is on the left side and has a fixed width
#Content, which is on the right side and has a fluid width
#Footer, which is on the bottom of the page and is full width
That is not a big deal, but i want the #Sidebar to move under the #Content on small screens. This alone is also not a big deal and can be achieved by using Bootstraps Push- and Pull-Classes.
The problem is, that i have no idea how to combine both issues.
I want the sidebar to be fixed width (until it moves down) AND to move under the content-div.
This is the code for the left sidebar moving under the #Content:
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-md-9 col-md-push-3" id="content"></div>
<div class="col-md-3 col-md-pull-9" id="sidebar"></div>
</div>
<div class="row"
<div id="footer"></div>
</div>
</div>
CSS: (Just for demo)
#sidebar {background: #CCC; height: 150px;}
#content {background: #111; height: 100px;}
#footer {background: #F00; height: 100px;}
See the fiddle here (You have to resize the results window).
Now i want the Sidebar in this fiddle to be fixed width (for example 100px).
Please help, this drives me crazy.
PS: position: absolute for the sidebar is no solution, because it will overlap the footer (due to different height).
Not sure how your push/pull works, bu I assume it's classes that appear on both your divs.
I wonder whether it would be easier to do that with media queries.
Anyway, here's a way to do it (sorry, my knowledge of bootstrap is close to nil, so I went for a very simplified piece of code):
http://jsfiddle.net/txLaukqm/1/
HTML :
<div id="sidebar"></div
><div id="content"></div>
<div id="footer"></div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-size: 0; /* to fight the space before the footer due to inline-block */
}
body * {
font-size: 1rem; /* to reset the font-size */
}
#sidebar {
display: inline-block;
background: #CCC;
height: calc(100% - 100px);
width: 100px;
vertical-align: top;
}
#sidebar.hidden {
display: none;
}
#content {
display: inline-block;
background: #111;
height: calc(100% - 100px);
width: calc(100% - 100px);
overflow: auto;
vertical-align: top;
}
#content.full-width {
width: 100%;
}
#footer {
background: #F00;
width: 100%;
height: 100px;
}
I have the following:
<div class='container-main'>
<div class='container-inner'>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
</div>
</div>
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
}
.clickable-box {
width: 300px;
height: 300px;
/* ???? */
}
I'm trying to make it so the clickable box will be centered inside the inner container IF there isn't enough room for another clickable box next to it.
BUT if there is enough width (600px +) then they create 2 columns (which are together centered inside the inner container), and if theres more room even (900px +) then 3 columns etc...
in other words, when I start out with a window of width 500px, it should show 1 column of boxes all lined up under each other. As I drag the window out, the box should stay in the center until theres enough room for another to go next to it, and they create 2 columns instead, and so on.
But I don't want the column to float left or right while I'm dragging the window and leave a big empty space
Try this CSS:
.container-main {
width: 100%;
}
.container-inner {
width: 99%;
text-align:center
}
.clickable-box {
display: inline-block;
width: 32%;
margin: 0 auto;
}
I think what you're looking for is to set clickable-box to display: inline-block. Setting display: inline-block essentially makes the div act like text in regards to text-align rules, but still keeps some block properties as well. It's pretty sweet.
HTML
<div class='container-main'>
<div class='container-inner'>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
<div class='clickable-box'>
stuff
</div>
</div>
</div>
CSS
.container-main {
background-color: red;
text-align: center;
}
.container-inner {
width: 90%;
}
.clickable-box {
background-color: blue;
width: 300px;
display: inline-block;
}
Here's a fiddle to demo it!
display:inline-block should be the best solution, this will display clickable boxes in one line if there is space for them:
.clickable-box {
width: 300px;
height: 300px;
display:inline-block;
}
Also add text-align:center to parent div in order for clickable boxes to be centered
.container-inner {
width: 90%;
text-align:center;
}
I think this should do it. I modified the CSS a bit to add some borders to see what the boxes look like. You could certainly remove those borders.
Fiddle Demo
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
border:3px solid #454;
text-align:center;
}
.clickable-box {
width: 300px;
height: 300px;
border:1px solid #000;
margin:0 auto;
display:inline-block;
}
I'd use float rules because they can push down the boxes that do not fit. For instance, float:left will get you at least two boxes on a 1096px. display:inline might have issues on browser rendering.
.container-main {
width: 100%;
}
.container-inner {
width: 90%;
}
.clickable-box {
width: 300px;
height: 300px;
float:left; // right there.
}
I'm currently creating a website, which has a centered box with text and and such.
Now, i also want a box floating on the right, with a little gap from my main box.
I'll leave a picture here, where the red box i drew is the floating box i want to make.
Btw. the blue box is just a censored box i didn't want on the picture.
So my question for you is, how do i make a floating box like that?
I've tried a couple of times with different methods.
in the CSS, i've made a box and gave it the property float:right;
But when i do that, it just turns out like this
Any help will be greatly appreciated
DEMO
You can keep an element center align by defining its width then using margin: 0 auto; technique. this will make sure your center div is in center then you can use position: absolute to create the other box on offset position.
HTML:
<div class="main-wrapper">
<div class="main">This is in center position.</div>
<div class="side">This is in offset position.</div>
</div>
CSS:
body {
background: #333;
color: #fff;
}
.main-wrapper {
position: relative;
margin: 0 auto;
}
.main, .main-wrapper {
width: 500px;
}
.main {
border: 1px solid #f00;
min-height: 500px;
}
.side {
width: 200px;
border: 1px solid #f00;
min-height: 200px;
position: absolute;
top: 60px;
right: -300px;
}
.main, .side {
text-align: center;
padding: 10px;
}
My best guess is that you have a <div> with a float: right; in the end. Keep it in the first code. So that it gets floated correctly. I would code this way:
<div class="right">Right</div>
<div class="main">
Main Contents
</div>
CSS would be:
.right {float: right; width: 20%;}
.main {margin: auto; width: 60%;}
Preview:
Fiddle: http://jsfiddle.net/praveenscience/8WHyp/
U can have main container display : inline-block
width of each sub container as width : 30%;
and width of the floating box which is inside 3rd sub container as
width : 100%;
In case u dont need first div,
put some margin for the 2nd container
ex .. margin-left : 300px;
and in case u dont want ur floating box width to be 100% of the 3rd container, u can adjust it too
I am trying to get a centered in the space that is left empty by a sidebar. This is how I'd like it to look like:
I actually managed to make this work OK for most browsers using margin: auto for the div in question, while setting overflow: hidden:
Fiddle here
CSS
#header {
height: 50px;
background: #224444;
color: #fff;
}
#container div {
padding: 1em;
}
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
}
#sidebar {
float: right;
width: 200px;
background: #aaa;
height: 300px;
}
HTML
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Centered Content
(Works everywhere but on IE9)
</div>
</div>
However, it does not work with IE9. It is strange as IE8 works OK!
I am running out of ideas, so I thought that maybe someone knows what is going on? The trick seems to work perfectly everywhere else.
NOTE: Please note that the content div should be flexible as it is in the demo. As the available space decreases, it should change size and squeeze in.
Isolate the centering from the floating
This affects IE9/10.
It works fine if the floated element is removed, or if width is used instead of max-width. The presence of floated content, combined with the use of margin:auto and max-width instead of width, appears to be confusing IE9+.
To fix this, put the centered content in a wrapper div, so that the centering of the content can be separated from the floating of the sidebar. In other words, too much is happening layout-wise in a single div, more than IE9+ can handle. So split up the #content div into two separate divs.
#header {
height: 50px;
padding: 1em;
background: #224444;
color: #fff;
}
#content-wrapper {
overflow: hidden;
}
#content {
max-width: 400px;
margin: auto;
padding: 1em;
background: #ddd;
height: 300px;
}
#sidebar {
float: right;
width: 200px;
padding: 1em;
background: #aaa;
height: 300px;
}
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content-wrapper">
<div id="content">
Centered Content
</div>
</div>
</div>
This tested fine in IE7/8/9/10. On a side note, because a wrapper div was added, the padding: 1em; now has to be added to each element individually.
IE is notorious for not working without proper doctypes.
Try adding the HTML5 one
<!DOCTYPE html>
Floats are a tricky business. Strictly speaking, they're only supposed to affect the inline content that flows around them, so margins acts like the floats aren't even there.
Try this instead:
#container {text-align:center}
#content {display:inline-block;text-align:left}
This should make the content box act like an inline element, and therefore appear centered in the space.
As far as I remeber I've always problems with margin:0 auto because I didn't specify width property.
So everytime you want use margin:auto you propably should write this:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:500px;
}
or in percentage:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:30%;
}
EDIT
If you want to create flexible layout please take a look to bootstrap and fluid grids.