I'm trying to get a fixed-sidebar-with-fluid-content layout working. I've run into a problem where the sidebar is at height: 100%, but it doesn't seem to be filling the whole window.
See this fiddle: http://jsfiddle.net/samselikoff/ZqycY/2/. The green sidebar should go all the way down.
Any ideas what's happening?
I think it's the issue with height: 100%; setting. When you resize the browser to shorten it, that sidebar will just cover the whole height of the browser window. You may try the following alternative CSS:
/*html, body { height: 100%}*/
body { background-color: #1db34f;}
#side-panel {
float: left;
width: 240px;
padding: 10px 20px 10px 20px;
/* height: 100%;
background-color: #1db34f;
border-right: 1px solid #dddddd; */
text-align: center;
}
#center-panel {
margin-left: 280px;
background-color: #ddd;
text-align: center;
border-left: 1px solid #dddddd;
}
#center-panel .row-fluid {overflow: auto;}
#center-panel .large {height: 400px; padding: 10px; background-color: #f17f49;}
Since you are looking for a fixed sidebar, it should be #side-panel { position: fixed; }. Hope this is what you want
Related
I am trying to make an image circular but it does not look to be a perfect circle after-all, here is a snippet of my code and a link showing the result
#aboutme{
padding: 150px;
}
#aboutme img{
border-radius: 50%;
border: 0;
width: 150px;
vertical-align: middle;
float:left;
padding: 0px 10px 10px 0px;
}
This is what happens: https://gyazo.com/92f967809fc4dea91a8a5cbaabf8d087
Padding is included in the calculation, as is everything inside the border-box. Using margin instead of padding, it won't be inside the border-box, resolving your issue.
For a perfect circle to form, you need the width to equal to the height, so the hackie way of border-radius: 50%; for shaping circle would work properly.
img {
border-radius: 50%;
border: 1px solid;
}
.perfect {
width: 150px;
height: 150px;
}
.weird1 {
width: 150px;
height: 83px;
}
.weird2 {
width: 80px;
height: 150px;
}
<img class="perfect"></br>
<img class="weird1"></br>
<img class="weird2"></br>
I'm currently stuck on an design issue that has had me scratching my head for a bit too long.
I have a two-column layout with one column for content (left) and a side bar that lists some sports venues (right) and this column's content exceeds that of the content column.
Basically what I'm looking to achieve is to make the content column match the left hand column.
Much like the one I quickly did up over on Codepen http://codepen.io/anon/pen/iLJAe
Any advice on how to do this would be greatly appreciated.
Thanking you in advance
Stu :)
Here what I have in my style.css for the two columns.
style.css
.content {
border: 1px solid #e8e8e8;
float: left;
margin: 5em 0 0;
padding: 1em;
height: 100%;
}
.sidebar {
border: 1px solid #e8e8e8;
float: left;
margin: 5em -0.1em 0;
padding: 1em;
height: 100%;
}
You can use css display: table; property.
First put the two divs in a wrapper (act as a parent div for both)
Like:
<div id="#wrapper">
<div class="content"></div>
<div class="sidebar"></div>
</div>
Then in your css, use display: table to the wrapper div and display:table-cell; to the column divs (this will make the both divs behave like <td> in a table) to get them to same height.
Like:
.wrapper{
height: 100%;
width: 100%;
display: table;
float:left;
}
.content {
border: 1px solid #e8e8e8;
margin: 5em 0 0;
padding: 1em;
height: 100%;
background: red; /* for test */
display: table-cell;
}
.sidebar {
border: 1px solid #e8e8e8;
margin: 5em -0.1em 0;
padding: 1em;
height: 100%;
background: blue; /* for test */
display: table-cell;
}
WORKING SAMPLE
http://i.imgur.com/TLJrmz0.png
border is part of a div called wrapper, and is cut off by other div/elements. Border is not an absoulte.
How can i make the border come above all other layers/elements/divs on the page?
condensed/simplified html/css:
http://pastebin.com/AsdAiLt3
Thanks.
.wrapper {
max-width: 800px;
min-width: 800px;
border: 3px solid #000000;
margin: 10px 0px auto;
padding: 10px 12px;
}
.page {
min-width: 100%;
margin: 0px auto;
position: relative;
background-color: #f00;
display: inline-block;
}
Demo here
Try adding overflow:hidden to the container with the border or make it wide enough not to be overlayed assuming the elements are in that container
I have tried multiple methods found on this website, and nothing seems to help.
I am trying to center 2 divs that are floating left and right in a container that has a 100% width.
CSS Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
margin: 0 auto;
}
#body-inner {
float: left;
width: 550px;
left: 325px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
right: 325px;
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
}
You need to do some research about how floats work, because I think you have the wrong idea. Floating one div left and one right, there is no way to center them, because they are floated. The left and right properties don't work unless the element is positioned (absolute, fixed, or relative with some implications). Also, it looks like you're trying to get the right edge of #bodybox to line up with the left edge of #body-inner. This won't work, because the right property is calculated from the right edge of the screen, not the left edge. Also, you're mixing fixed box dimensions with a fluid container width. This is fine, if you account for what happens to them when they collide.
If you're just trying to align the two <div> beside each other, centered on the page. In this case, inline-block is probably your friend. There are numerous implications and workarounds regarding white space, font sizes, order of content, etc., but essentially you would do:
#body-container {
width: 100%;
text-align: center;
}
#body-inner {
width: 550px;
}
#bodybox {
width: 200px;
}
In the above, the two <div>s would sit next to each other as long as the container is wide enough, once the container is too small, they will display one before the other, each centered in the container.
Could this be what you're looking for? Click here...
If I understand your question, you're trying to center a <div> that has 2 more <div> parents...
Code Snippet:
#body-container {
background: none;
height: 100%;
width: 100%;
/*margin: 0 auto;*/
/* testing border and height, could be deleted */
border: solid;
height: 500px;
}
#body-inner {
width: 550px;
margin: 0 auto;
background: none;
padding-top: 3%;
padding-left: 10px;
padding-right: 10px;
/*border-left: 1px solid #000000;
border-right: 1px solid #000000;*/
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}
#bodybox {
margin: 0 auto;
width: 200px;
height: 100%;
/*right: 325px;*/
background: none;
font-size: 10px;
font-family:Arial, Helvetica, sans-serif;
/* testing border and height, could be deleted */
border: solid;
height: 400px;
}
Hi have had to put the menu bar further down the page so javascript will load a slide show.
I am trying to then push the menu bar up. Can I put in an absolute reference so it appears a t the top.
#left, #middle, #right {
background-color: inherit;
color: inherit;
float: left;
padding-left: 10px;
padding-right: 5px;
}
#left {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
}
#middle {
width: 80%;
border-left: 3px dotted #999;;
background: #fff;
}
#header {
width: 100%;
background: #666;
}
#footer {
clear: both;
width: 100%;
background: #fff;
}
#left2 {
width: 15%;
min-width: 10em;
padding-left: 5px;
background: #fff;
margin-top: -500px
}
#middle2 {
width: 80%;
border-left: 3px dotted #999;;
padding top: 500px
}
In Html
<div id="middle2">
<div id="left2">
Although it is completely unclear in your code what the 'menu bar' is, or which class might apply to it, it seems to me you should try absolute positioning in CSS
CSS:
.menubar
{
position:absolute;
top:20px;
left:20px;
}
html:
<div id="some_menu_bar" class="menubar">
your menu goes here
</div>
I am trying to then push the menu bar up.
This makes me think you hope to delay the positioning of the menu bar until some script has executed. You cannot do this with CSS alone*.
*Ok perhaps you can with CSS3 and animations but this isn't well supported at the moment.