This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
I've stared at this for some time now and to no avail can I come up with a solution that keeps the liquidy of the website.
What I am trying to accomplish for the #right-content to fill all available space height wise inside of its parent which is the #bottom-container. so it maintains its liquidy.
But giving it a min-height:100% makes it overflow the parent.
Live example can be found at the following link
Live Example
a static example of what im trying to acomplish.
Static Example
Your CSS is a main problem
Following CSS is from the URL what your want to achieve
#right-content {
display: inline-block;
width: 38%;
font-size: 14pt;
font-family: Verdana;
max-height: 600px;
vertical-align: top;
padding: 5px;
float: right;
margin-right: 25px;
overflow: hidden;
}
And Following CSS is form What your have
#right-content {
display: inline-block;
width: 36%;
font-family: Verdana;
height: 99.99%;
vertical-align: top;
padding: 5px;
}
Hope this will give you some clue to proceed
EDIT - 1
Main Problem with CSS is max-height. You will need to specify the correct height for your Parent DIV. If you want the resolution based dynamic CSS, you will need to update your height using JS. for hint check this
jQuery Screen Resolution Height Adjustment
try the following css on #mCSB_1,
#mCSB_1
{
position: relative;
height: 500px;
max-width: 100%;
overflow: hidden;
}
You need to set a float on #left-content. Add this to your css:
#left-content {
float:left;
width:700px;
}
and remove inline-block from the #right content:
#right-content {
margin-left:750px;
display:block
min-width:250px;
}
This will maintain a liquid format to the right-container.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have a sidebar on the right and I want to create two centered together columns for Tumblr posts on the left. What can I do?
#wrapper /*for two columns*/ {
display: inline-block;
margin: 15px 15px 15px 30px;
}
#wrapper .posts {
width: 400px;
margin: 0 15px 15px 0px;
padding: 10px;
}
#sidebar /*including some other stuff, obviously*/ {
display: table;
width: 250px;
height: 100%;
position: fixed;
top: 0px;
right: 0px;
}
To make HTML elements center aligned:
For Block element such as div, p, ..etc., these should have width or max-width set to some value and there should be margin-left: auto & margin-right:auto
For inline element such as span, em, ..etc., we can center align by giving text-align:center to its parent element.
Your horizontal margins on #wrapper should be set to auto. That’s the key. The parent (possibly the body) may need to also have set text-align: center.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have been having trouble for many days, and have asked several related questions in regards to these issues. My main question here is how to stop my divs from overflowing. I just managed to fix a problem with them being wrapped onto a different line.
Here is a fiddle.
And here is a snippet:
#main-content {
padding: 0% 15% 0% 15%;
overflow: hidden;
height: 620px;
clear: both;
width: 70%;
border-style: solid;
border-color: #31679a;
border-width: 0px 0px 2px 0px;
}
#side-bar {
float: left;
max-width: 28%;
height: 99%;
padding: 1% 1% 0% 1%;
font-size: 14px;
}
#container {
float: left;
max-width: 68%;
height: 100%;
padding: 1% 1% 0% 1%;
}
Main content contains both sidebar and container, which sit side by side (with the sidebar to the left)
You can see in the main content area, that the container overlaps the sidebar at certain widths, instead of stopping at it's edge. This also happens with the images in the header, but that doesn't show in the fiddle.
I would greatly appreciate any help.
As a quick fix, adding the following code to your CSS would stop the links from wrapping onto a new line:
#sidebar a {
white-space: nowrap;
}
However your real problem is that your sidebar div isn't wide enough to contain its content.
You should also be using divs instead of tables for layout purposes: read why here.
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 9 years ago.
I have tried looking at similar questions, but I can't seem to find a solution. I'd appreciate it if someone could take a look here and see why the sidebar is not extending to the bottom of the content div: http://robert.io/posts/1.html
I definitely don't want to use Javascript for this. I appreciate the help!
The quick fix is to add these:
body { background-color: #2C3B63; }
#content { background-color: white; }
Make the following CSS changes:
<style type="text/css">
#page {
display: table;
height: 100%;
}
#sidebar, #content {
display: table-cell;
float: none;
clear: none;
}
#sidebar {
vertical-align: top;
}
</style>
Tested on Chrome 26 (OS X)
You can fix this by changing one line of code in your CSS: position: relative
#sidebar {
position: fixed;
}
But with how you have things setup, it causes your content to sit behind your sidebar. So just adjust your margin-left for #content. I plaid around with it, and looked about right around 325 (if I remember correctly).
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
On my website I have whitespace on the right of my page, but all widths in the page are set to 100%, including the color of the page. So even if there was a width that was extending outside the page, this part should be the same color as the rest.
I am using an anchor based website, and if you look at it http://www.jeremyspence.net78.net/ you can see that only on the first anchor is there whitespace on the side, but there is extra space on the side all the way through (obviously). I don't want either the whitespace or the extra space, but the whitespace is perplexing. And yes I have margin: 0; and padding: 0;
Understanding the box-model
In your site, the classes websitecontainer, packagecontainer and mecontainer all have the following style rules:
...
width:100%;
padding:50px;
...
This literally means that they should span the full width of their container (the body in this case) and then the browser should add 50px of padding around that width. This is the way it should be according to the W3C standard box-model that is used by modern browsers. In outdated versions of IE, the box-model would have worked the way it is currently setup in your page and the padding would have been subtracted from the width.
See the illustration below to understand the difference:
The solution
The straight forward solution would be to remove the padding from these containers, eliminating the extra width and redundant spacing. If you require that padding, you can simply wrap the contents of the current containers inside another container and apply the padding to this new inner container. For example:
<div class="some-container">
<div class="inner-container">
<!--Content goes here as before-->
</div>
</div>
With the style rules now being:
.some-container {width:100%;}
.inner-container {padding:50px;}
Your CSS here:
.homecontainer {
background:#ffe6ce;
width: 100%;
height: 1080px;
padding-top:50px;
}
Should maybe be:
.homecontainer {
background:#ffe6ce;
width: 100%;
height: 1080px;
padding: 50px 0 0 0;
margin: 0;
}
Note the addition of margin and the reworking of your padding to be shorthand format which basically runs clockwise from the top: 50px (top) 0 (right) 0 (bottom) 0 (left)
Replace your current CSS code for these styles with this
.websitescontainer {
width: 100%;
height: 1080px;
background: #cefece;
}
.packagescontainer {
width: 100%;
height: 1080px;
background: #cefefe;
}
.mecontainer {
width: 100%;
height: 1080px;
background: #fecefe;
}
Note: You can make this code in this way
.websitescontainer, .packagescontainer, .mecontainer{
width: 100%;
height: 1080px;
background: #cefece;
}
.mecontainer {
background: #fecefe;
}
It looks like removing
padding: 50px;
from .mecontainer solves it.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
100% width bg images not extending on horizontal scroll
I have been struggling with this issue for quite a while. I am building a very basic web application for travel agents, but to give some lay-out we've decided to have a banner with 2 colored sub-banners. The issue is that if I have a resolution of say 1366x768 (px). The banner will naturally fit to the screen resolution if the CSS is correct. This is indeed the case and the 2 colored banners fill up until 1366px.
There is; however a table that is larger than the screen resolution, so once I scroll to the right, I see that my colored sub-banners don't continue at all and are just plain white. Is there any way to make the colored banners continue even after the edge of the screen?
I have included the HTML and CSS code for you:
HTML
<div class="banner">
<span>- ETTA (Electronic Transactions for Travel Agents)</span>
<div class="orangeBanner" />
<div class="blueBanner" />
</div>
CSS
.banner img {
vertical-align: middle;
}
.banner span {
font-size: 30px;
}
.banner .orangeBanner {
height: 30px;
width: 100%;
line-height: 30px;
padding-left: 8px;
font-variant: small-caps;
background-color: #f18b02;
}
.banner .blueBanner {
/*Layout*/
display:inline-block;
height: 30px;
width: 100%;
line-height: 30px;
padding-left: 8px;
margin-bottom: 5px;
/*Style*/
font-variant:small-caps;
color: #ABD5DF;
background-color: #009DE0;
}
Thanks a lot for your help!
Best regards
As Andy said, <div> elements are not self closing so you should add closing tags to them properly.
If overflowing tables is a problem, just setting a max width should fix that.
e.g
table {
max-width: 100%;
}
The comments you got has some really useful information.
Another quick fix would be the following, making <div class="banner"> always take up 100% of the width and not scroll left and right.
.banner {
width:100%;
position:fixed;
left:0;
}
It might however mess up some relatively positioned elements.