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 try to place a div on the right side of another one. I didn't succeed.
Here is a jsFiddle: http://jsfiddle.net/Xn5uh/
I would like the main-content (colored in red) to be on the right side.
Any idea?
Thanks.
Fix spelling in overflow:auto;
.main-content
{
overflow:auto;
Define float in your .main-content also. Write like this:
.main-content {
background-color: Red;
border: 1px solid black;
float: left;
width: 600px;
}
OR
Define overflow:hidden in your .main-content
.main-content {
background-color: Red;
border: 1px solid black;
width: 600px;
overflow:hidden;
}
In your example your overflow spelling is wrong
Check this http://jsfiddle.net/Xn5uh/5/
There was a typo on the maincontent class. see the updated fiddle
overflow:auto; /*was ooverflow */
for the .main-Content add float:left.
DEMO
Related
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.
I have created a web site that can be seen here. Can anyone tell me why the text goes below the "container" div and "footer" div only on this page.
Any help would be appreciated. It is probably something simple I am missing, just can't work it out.
Simple fix. Change this:
#about {
clear: both;
position: relative;
top: 100px;
}
to this:
#about {
clear: both;
position: relative;
padding-top: 100px;
}
The #about has a position: relative and a top: 100px. Please remove the top 100px.
Before the #about you should put a clear div. Which means nothing more than a DIV.
<div class="clear"></div>
With the CSS
.clear { clear : both; }
Now you should be fine!
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.
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'm working on a page there:
I'm a newbie and followed a tutorial there: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
The footer is at the bottom but the height of the page seems to be bigger than it should be and there is a scrolling bar on my browser, anybody can tell me why ?!
The extra height seems to be coming from the padding-top on #footer-container, the border on #footer, and most significantly the margin on #masthead-container (changing this to padding on #content-container seems to fix it).
Getting rid of all of those, eliminates the scrollbar.
The <footer> has a padding-top which should be counted in the box model. So the actual margin bottom of wrapper should count both the height and padding of the footer. Look into the html box model for more details! It'll surely be fun :) And also, use Chrome developer tools or Firefox firebug to speed up your learning process
Your link doesn't open. But maybe you can do something like
body {
height: 100%;
position: relative;
}
.footer {
position:absolute;
left: 0;
bottom: 0;
}
I have done some changes in your the style you wrote. just replace your code that is written for #footer.
#footer {
background-color: white;
border: 1px solid #D2CECE;
border-radius: 5px 5px 0 0;
box-shadow: 4px 5px 3px 1px rgba(0, 0, 0, 0.2);
clear: both;
height: 200px;
margin-bottom: 0;
margin-left: 193px;
position: fixed;
width: 960px;
}
I have set the left margin as 193px which you need adjust.
you should add a main container div to contain all mark up in the .
like
<body>
<div id="main">
<!-- all the markup (HTML code) -->
</div>
</body>
so by applying style to "#main" you can make all the contain center align and no need to give left or right margin to make it center.
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 am working on my portfolio: www.bbellmedia.com/mywork
I want the text 'Bryan Bell' to be centered how it is, but also be fixed when a user scrolls.
What is the best way of achieving this?
Thank you very much!
#header {
position:fixed;
text-align:center;
width:100%;
}
if you want the image does not over your heading, use this
.header {
....
position: fixed;
top: 0px;
width: 100%;
background-color: black;
z-index: 300;
}
.app1{
margin-top: 184px;
}
Hey now used to this css *style-sheet*
.header to give position fixed and now give to left 0 right 0 top 0 and give z-index maximum
.header {
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 0;
z-index: 999;
}