I've searched around the forums but can't get an exact answer to the question. I want to tweak my blog layout at http://techtites.com/ to make the content area flexible width that adjusts when the browser changes width without pushing the sidebar to the bottom.
It is currently a fixed width layout.
Main styles that I've been playing with are:
#wrapper {
width:960px;
margin:0 auto;
}
#content {
padding:25px 0;
}
section {
float:left;
width:660px;
margin-right:20px;
}
aside {
float:left;
width:280px;
}
I want to make the section width to be dynamic, while retaining the aside to sit at the right of the window.
use positioning. set your #wrapper div to position: relative; this will position all child elements of that div relative to it rather than the browser window.
now position your aside to the top left of your #wrapper div
aside {
width: 280px;
position: absolute;
right: 0;
top: 0;
}
and finally, give enough padding to the section div so that it can still expand and contract, but it leaves enough room for the aside. You want the padding to equal the width of the aside (in this case 280px).
section {
padding-right: 280px;
}
I put up an example of all of this on jsFiddle: jsfiddle.net/2e9HM/6/
BONUS: if you really want to get fancy, you can set the max-width of your #wrapper div so that the page is flexible within that size. If you do this, make sure you set a min-width as well (equal to the size of your aside) so that the aside doesn't fall outside of the #wrapper when the window is shrunk down all the way.
Morphius solution is the best so far - for an example, see
http://codepen.io/anon/pen/wBBdgg
.blbx {
background:blue;
width: calc(100% - 100px);
height:50px;
display:inline-block;
vertical-align:top;
text-align:center;
}
.rdbx {
background:red;
display:inline-block;
height:50px;
width: 100px;
vertical-align:top;
}
.surround {
width: 100%;
height:50px;
}
.myimg { max-width:100%;
max-height:100%;
}
<div class='surround'>
<div class="blbx" ><img class='myimg' src="http://assets.cdpn.io/assets/logos/codepen-logo.svg">
</div><div class="rdbx"></div></div>
Change your styles to this
section {
float:left;
width:100%;
margin-right: -280px;
}
aside {
float:left;
width:280px;
}
Live example
Maybe this would do:
section {
float:left;
width:100%;
padding-right:250px;
height:100px;
}
aside {
float: left;
width: 250px;
min-height: 100%;
}
section {
float:left;
width:660px;
margin-right:20px;
height:100px;
}
aside {
height:100px;
margin-left: 670px;
}
live demo
Related
I'm a css newbie and I am using DRUPAL (CMS) to design my site. I have been able to center a image by using this tag:
#block-imageblock-4{
width:25.5%;
height:10%;
text-align:center;
margin-top:1%;
margin-bottom:1%;
margin-left:37%;
margin-right:36.5%;
}
So if the screen resolution is 1366px768px(max #page) or larger #block-imageblock-4 stays in the center of the page.
WELL on another page I have two images with two tags. I used this CSS to place them side by side.
#block-imageblock-17,#block-rotating-banner-1{
display:block;
width:auto;
margin-left:2%;
}
There respective tags:
#block-imageblock-17{
width:15%;
float:left;
margin-top:1%;
margin-left:3%;
margin-right:1.5%;
margin-bottom:5%;
}
#block-rotating-banner-1 {
margin-right:-30%;
margin-top:1%;
margin-bottom:10%;
float:left;
background-repeat:no-repeat;
width:26%;
height:180px;
max-width:100%;
min-height:100%;
background-image:url("/sites/default/files/imgs/ArtistFrame.png");
}
However if the screen resolution is larger than 1366px by 768px then the images are not centered. and thats my problem.
I have noticed that if I take out all float and margins out of both tags and put both elements like this:
#block-imageblock-17,#block-rotating-banner-1 {
display:block;
width:auto;
text-align:center;
margin-top:1%;
margin-bottom:1%;
margin-left:37%;
margin-right:36.5%;
}
the two images ARE CENTERED, BUT NOT next to each other.
Any suggestions to get both images side by side and in the center of the page like tag #block-imageblock-4 ?
Try wrapping the images in a <div> tag and centering the div using margin: 0 auto; .
Something like this
CSS
.centerDiv { margin: 0 auto;}
HTML
<div class="centerDiv">
<img src="urlhere" />
...
</div>
try this:
img {
height: 250px;
left: 50%;
margin-top: -125px;
margin-left: -125px;
position: absolute;
top: 50%;
width: 250px;
}
and more here:
http://www.paulund.co.uk/absolute-center-images-with-css
div
{
margin: 0 auto;
width: 100px;
}
img
{
width: 100px;
}
the width of an element with "margin: 0 auto;" needs to have its width EXPLICITLY defined. See JSFiddle
I am trying to build a layout that has two div blocks next to each other. Both of them are centered to the page. The left block (1) varies in width depending on how much space their is available in the window (from 300px min to 400px max). Block 2 has a fixed width of 640px and does not change. Both block's height extend to the bottom of the page. If one block is longer than the other than the other block would compensate with white space (with the background color still applied).
Youtube's video page can be used as an example, however in my case the larger block is on the right. Notice how youtube's right block (suggested videos) gets larger or smaller from 300-400px when the window is resized.
This is the best I can come with:
http://jsfiddle.net/7dL5z/
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
max-width:1040px;
min-width:940px;
margin:0 auto;
height: auto;
min-height: 100%;
}
#left {
float:left;
min-width:300px;
max-width:400px;
height:100%;
background:#EEE;
}
#right {
float:right;
width:640px;
height:100%;
background:#666;
}
<html>
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
Two problems:
1) I can't get the divs to extend to the bottom.
2) Adding a float to block 1 renders the min-width property useless
I am looking for a JS and CSS media query free solution if possible.
Any one have a clue?
A few things:
You need to add
html {
height:100%;
}
to get html's sub elements to fit the window. Then remove height:auto from the wrapper.
If you have a max-width set in pixels on the wrapper without telling it a variable width relative to the window (like width:90%), the contents can't change size when the browser resizes, because their width is fixed.
So I added width:90% for demo purposes. You can set it to whatever percentage you think looks nice in the window.
Put your right div before your left in your html like so:
<div id="wrapper">
<div id="right">right</div>
<div id="left">left</div>
</div>
and then you can use left to fill the space left by right without having to float it or tell it a width. Setting the max & min width on the wrapper will keep left from getting too small or big.
So the final css would be:
html, body{
margin:0;
padding:0;
height:100%;
}
#wrapper {
max-width:1040px;
min-width:940px;
margin:0 auto;
height: 100%;
width:90%;
}
#left {
overflow:hidden;
height:100%;
background:#EEE;
}
#right {
float:right;
width:640px;
height:100%;
background:#666;
}
Here is one way of doing it using display: table-cell.
html {
height: 100%;
}
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
margin:0 auto;
height: 100%;
display: table;
min-width: 940px;
}
#left {
display: table-cell;
height:100%;
min-width: 300px;
max-width: 400px;
background:#EEE;
}
#right {
display: table-cell;
width: 640px;
height: 100%;
background:#666;
}
To get the panels to extent to 100% of the browser height, you need to set the height on the html element.
The behavior may be close to what you need.
See demo at: http://jsfiddle.net/audetwebdesign/ZVN97/
Something like this http://jsfiddle.net/pmj7Z/ maybe?
html, body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
max-width:1040px;
min-width:940px;
margin:0 auto;
height: 100%;
}
#left {
display: block;
float: left;
min-width:300px;
max-width:400px;
height:100%;
background:#EEE;
}
#right {
float: right;
width:640px;
height:100%;
background:#666;
}
My solution is set wrapper to display: table & its childs to display:table-cell.
Both areas will expand bottom when one of them overflow the screen size. If not, both will expand to bottom (100%).
http://jsfiddle.net/7dL5z/4/
HTML:
<body>
<div id="wrapper">
<div id="left">
<p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
</div>
<div id="right">right</div>
</div>
</body>
CSS:
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
display: table;
height: 100%;
margin:0 auto;
max-width:700px;
min-width:500px;
width: 100%;
}
#left {
background:#EEE;
display: table-cell;
max-width: 300px;
min-width: 100px;
width: 40%;
}
#right {
display: table-cell;
background:#666;
}
If you use jQuery, here is my answer:
$(document).ready(function() {
layoutInit();
$(window).resize(function() {
layoutInit();
});
function layoutInit() {
// you can also hard code the max-width and min-width in the javascript,
// following function is used to remove "px" on "1040px"-like strings from CSS
var pxStriper = function(str) {
return str.substr(0, str.length - 2);
}
// all parameters you need to update the layout:
var bodyWidth = $("body").width(),
bodyHeight = $("body").width(),
wrapperMaxWidth = pxStriper($("#wrapper").css("max-width")),
wrapperMinWidth = pxStriper($("#wrapper").css("min-width")),
rightWidth = pxStriper($("#right").css("width"));
// 3 different situations with width of the body:
if (bodyWidth <= wrapperMaxWidth && bodyWidth >= wrapperMinWidth) {
// 1:
$("#wrapper").css('width', bodyWidth);
$("#left").css('width', bodyWidth - rightWidth);
} else {
if (bodyWidth > wrapperMaxWidth) {
// 2:
$("#wrapper").css('width', wrapperMaxWidth);
$("#left").css('width', wrapperMaxWidth - rightWidth);
} else {
// 3:
$("#wrapper").css('width', wrapperMinWidth);
$("#left").css('width', wrapperMinWidth - rightWidth);
}
}
// update the height:
$("#wrapper").height(bodyHeight)
}});
I would like to align an absolute positioned div. Top:50%, bottom:50% not working, what's the solution for this?
CSS
#container {
position:relative;
background:red;
width:600px;
height:600px;
}
#cen {
position:absolute;
width:300px;
height:300px;
background:grey;
top:50%;
bottom:50%;
}
HTML
<div id="container">
<div id="cen"></div>
</div>
http://jsfiddle.net/2xq5F/
To center something vertically, you need do add a top: 50% and a negative margin-top: -(elementHeight/2).
In your case it will be
#cen {
position:absolute;
width:300px;
height:300px;
background:grey;
top:50%;
margin-top: -150px;
}
You can also do it this way:
#cen {
position:absolute;
width:150px;
height:150px;
background:grey;
top:0;
bottom:0;
left: 0;
right: 0;
margin: auto;
}
Demo at: http://jsfiddle.net/audetwebdesign/EBmy3/
Big advantage, no math required.
However, this works because you specified width and height. This gets trickier when you use percentages.
Note: I made the blocks half the size so they fit in the fiddle window... will also work with the larger blocks.
Works Well With Replaced Elements
This technique does a pretty good job if you are positioning an image, which has specific dimensions (though you may not know them).
See example in fiddle.
Vertical alignment is based off of other inline elements. The best way I've found to vertically align something is to add a psuedo class.
It's easy to vertically align something if you know the dimensions, like some of the other answers have noted. It makes it harder though, when you don't have specific dimensions and needs to be more free.
Basically, the method aligns the psuedo class with the rest of the content to align middle whatever is inside the container.
div#container {
width: 600px;
height: 600px;
text-align:center;
}
div#container:before {
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
div#cen {
display:inline-block;
vertical-align:middle;
}
I'm not sure what you need it to be absolutely positioned for, but if you trick CSS into thinking your container is a table-cell, you can use the vertical-align property for a fully dynamic layout.
#container {
position:relative;
background:red;
width:100px;
height:200px;
display: table-cell;
vertical-align: middle;
}
#cen {
width:100px;
height:20px;
background:grey;
}
If those are the real measurements, why not just do this?
#cen {
position: absolute;
width: 300px;
height: 300px;
top: 150px;
background:grey;
}
Basically, the current setup has space between the top of the page and the #header div. I want to remove that space. Tried searching, came up with adding
position:absolute;top:0;left:0;
to the #header div, it works (positions it at the top without space) but the rest of my divs loose all their structure. How to position it at the very top and preserve the current layout of the rest of the divs?
I am also using an image underneath the divs as a background. Using this code.
body
{
background-image:url('../imagez/bestone1400.jpg');
background-repeat:no-repeat;
background-position:top, center;background-size:100%; 2000px;
}
Thanks in advanced.
#container
{
width:100%;
}
#header
{
background-color:#FFA500;
height:400px;
}
#leftcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:left;
}
#content
{
background-color:#EEEEEE;
height:200px;
width:80%;
float:left;
}
#rightcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:right;
}
#footer
{
background-color:#FFA500;
clear:both;
text-align:center;
}
There is likely padding or margin on html or body. Try something like:
html, body {
padding: 0;
margin: 0;
}
There may also be padding or magins on divs or other elements, so a universal selector might work:
* {
padding: 0;
margin: 0;
}
But it is generally good practice to implement a css reset, like this one, which may be the best solution.
You should remove the Default browser padding, margin and border, use:
/*reset default browser settings */
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
I'm trying to accomplish this design:
Where the sidebar will be fixed, but the right side (the main content) will scroll vertically (and potentially horizontally if the user's browser window is smaller). What is the best way to achieve this?
I tried making the sidebar be "fixed" with a fixed width of 200px, and then the main content just has a margin-left of 200px. However, if the user's browser is then smaller than the main content, the sidebar overlaps all the content as the user tries to scroll horizontally.
Is there a smarter way to achieve this? Thanks!
Use the content div as your container for the page.
.sidebar {
position: fixed;
width: 200px;
height: 400px;
background: #000;
}
.content {
margin-left: 200px;
height: 500px;
width: auto;
position: relative;
background: #f00;
overflow: auto;
z-index: 1;
}
.info {
width: 1440px;
height: 300px;
position: relative;
background: #f55;
}
<div class="sidebar"></div>
<div class="content">
<div class="info"></div>
</div>
Your content will need to be the container to put the page in. The values here are my test to see if I am correct in this. If your width and height exceeds the values you set for content, the scroll bars will appear.
Have a fiddle: http://jsfiddle.net/djwave28/JZ52u/
edit: responsive sidebar
To have a responsive fixed sidebar, simply add a media-query.
Example:
#media (min-width:600px) {
.sidebar {
width: 250px;
}
.content {
margin-left: 250px;
}
}
Here's another fiddle: http://jsfiddle.net/djwave28/JZ52u/363/
Here is an alternative: http://jsfiddle.net/BoyWonder/8mVQX/embedded/result/
body{
padding-left:200px;
margin:0;
}
div#sidebar{
position:fixed;
height:100%;
width:200px;
top:0;
left:0;
background:grey;
}
div#content{
background:black;
width:100%;
height:1600px;
}
Here is another alternative by using only two CSS lines
.sidebar {
position: sticky;
top: 0;
}
and the credit goes to this post.
You can also experiment with the code over here.