If you'll take a look at my site http://www.metroflatsmiami.com/listing.html, you'll see that I have a floating DIV on the right, but the thing is it's set off the left side. If you resize your window (or have a different resolution), it won't look right. I want it to always be just to the right of the main content DIV, but still scrolling... any thoughts?
The CSS:
.floating_price_box {
position:fixed;
width: 200px;
border: solid 1px black;
height: 400px;
top: 50px;
left: 1000px;
}
Use jQuery:
$(window).bind("load resize", function(){
$('.right-block').width($('.main-block').width() - (25));
});
Yeah....why not do right: 50px instead of left: 1000px?
If you set the floating_price_box div to have a left value of 75%, it will scale with the page size. It breaks when the browser window gets too small, but the window has to be pretty small for that.
.floating_price_box {
position:fixed;
width: 200px;
border: solid 1px black;
height: 400px;
top: 50px;
left: 75%;
}
In order to make the sidebar 25px to the right of the main content, you could also do something like this. Add an inner div to your floating price box:
<div id='home_search_container'>
...content...
</div>
<div class="floating_price_box">
<div class="floating_price_box_inner">
Nightly Rate: $90 - $130 (Instant Quote)<br/>
</div>
</div>
And here's your CSS:
#main {
float: left;
margin-right: 25px;
width: 700px;
}
.floating_price_box {
float: left;
width: 200px;
}
floating_price_box_inner {
border: solid 1px black;
height: 400px;
position: fixed;
top: 50px;
}
Basically all this second method does is float the outside boxes to the correct position. Then the inner div is styled to fix the box vertically where you want it.
The simplest way is to position it like the main content and then use margin to shift it to the side:
.floating_price_box {
position:fixed;
width: 200px;
border: solid 1px black;
height: 400px;
top: 50px;
/*left: 1000px;*/
margin-left : 700px; /* main column width */
}
Related
Recently I have come across a problem for which I am not finding any appropriate solution.
Below is the image which gives an idea of what i am trying to achieve:
The div shown by the arrow is the mark of the problem which i am finding a solution for.
The problem is I want the div to be extended to full screen.
This div is inside a parent div who has a fixed width due to which i am not able to extend my image to full screen.
Have tried giving overflow to parent but isn't working.
I have tried below solution which is working to a certain extent but need a reliable solution.
width: 100%;
left: 0;
position: absolute;
margin-left: calc(-31.5vw);
align-content: center;
Could someone please provide some solution to this?
html, body
{width: 100%; height: 100%; overflow: hidden;}
#parent{
display: block;
background-color: yellow;
border: 1px solid red;
position: fixed;
width: 200px;
height:100%;
}
#child1{
background-color: red;
display: block;
border: 1px solid yellow;
position: absolute;
width: 100vw;
margin-left: calc(200px - 100%);
//top:0px
}
<div id="parent">parent with position: fixed
<div id="child1">child wrapper (uncomment top to fit the parent wrapper)</div>
</div>
use Viewport Sizes so it will cover the whole page (vw and vh)
#first {
width: 100px;
height: 100px;
background:gray;
position: fixed;
top: 0;
left: 0;
}
#second{
width: 100vw;
height: 100vh;
background:blue;
position:absolute;
}
<div id="first">
<div id="second">
something
</div>
</div>
The below code snippet should work, if I understand your question correctly. Setting the width of the child div to 100vw makes the div 100% of the width of the viewport (window).
Also note that in order to get the child to start at the left of the viewport and not the left of the parent, I gave the child a position of absolute and a left of 0. Because the parent is not positioned, it starts the left of the child at the left of the viewport (the closest positioned ancestor).
#parentDiv {
width: 250px;
height: 250px;
margin: 0 auto;
background-color: orange;
border: 2px solid red;
}
#childDiv {
/* 100vw is 100% of the viewport width. */
width: 100vw;
height: 50px;
background-color: lightblue;
box-sizing: border-box;
border: 2px solid green;
position: absolute;
left: 0;
}
p {
text-align: center;
}
<html>
<body>
<div id="parentDiv">
<p>Parent</p>
<div id="childDiv"><p>Child</p></div>
</div>
</body>
</html>
I am new to CSS. I am building a webpage that will have 3 columns - the left one for navigation, the middle one for page content and the right one for external links and notes. First when I went with width in percentage, the overflow was working. Now the overflow is not working as well as the right border got disappeared. Here is my code. Please help me out. Thanks in advance.
//Total pixels: 1366px. (I found this after running a given code on www.w3schools.com).
#rightcontentborder {
border: 2px solid;
padding: 5px;
/* border-radius: 1em;*/
//Left-margin = 1366 - 716 = 650px.
margin-left: 650px;
margin-right:1366px;
// width:50px;
height:700px;
// overflow:scroll;
float: right;
position: absolute;
}
#maincontentborder {
border: 2px solid;
padding: 5px;
// background: #dddddd;
margin-left: 216px;
//Given width=500px.
//Right-margin = 1366 - (216+500) = 1366-716 = 650px.
margin-right: 650px;
// width: 100px;
height: 700px;
overflow: scroll;
// float: center;
}
#leftcontentborder {
border: 2px solid;
padding: 5px;
// background: #dddddd;
/* border-radius: 1em;*/
margin-left:0px; /*I have added this line to adjust the left margin of the LEFT content*/
margin-right:1150px; /*I have added this line to adjust the right margin of the LEFT content*/
//Width = 1366-1150 = 216px.
height:700px;
// float: left;
position: absolute;
}
If I got your requirement accurately, you need 3 column page. The css is not accurate you have written. You have to use float for achive this. Lets see the expected html
<div class="container">
<div class="left-content">
<!-- left sidebar content -->
</div>
<div class="main-content">
<!-- main content -->
</div>
<div class="right-content">
<!-- right sidebar content -->
</div>
</div>
Lets assume that the widths of the divs are 300px, 600px and 300px relative to left, main and right.
.container {
overflow: hidden;
width: 100%;
max-width: 1200px;
}
.left-content {
width: 25%;
max-width: 300px;
float: left;
min-height: 700px;
}
.right-content {
width: 25%;
max-width: 300px;
float: left;
min-height: 700px;
}
.main-content {
width: 50%;
max-width: 600px;
float: left;
min-height: 700px;
}
Try to understand the usage of css relative to the html. And customize with your dimensions. good luck.
When position is positive, scrollbar work just fine. but when left is negative, scrollbar won't apear. how can i have scrollbar when element is on the left side or on the right side?
sample is here:
.container{
position: relative;
width: 350px;
height: 250px;
background: gray;
overflow: scroll;
margin: 10px auto;
}
.child {
position: absolute;
top : 200px;
left: -50px;
width: 150px;
height: 150px;
background: white;
border: 1px solid blue;
}
<div class="container">
<div class="child"></div>
</div>
It seems like you cannot do that, because the browsers do not provide that feature.
This is my understanding after looking at the WebDriver spec
http://w3c.github.io/webdriver/webdriver-spec.html
In the section titled 'Determining if an element is displayed'
there is a point that says
"The User Agent must not allow negative scrolling"
I am aware about the concept of 'margin-collapse'. But , why am I not able to see 10 px margin on the top of the first box here. The top box(which has the id 'first') should have 10px margin above it. If this is not the correct wat to get it, then what is it? And, why this doesn't work.
CSS:
#Main{
background-color: gray;
position: relative;
width: 200px;
height: 300px;
}
.box{
position:relative;
height: 60px;
width: 175px;
background: black;
margin: 10px 10px 10px 10px;
}
HTML:
<div id="Main">
<div id="first" class="box"></div>
<div id="second" class="box"></div>
<div id="third" class="box"></div>
</div>
I know one way could be that we can give 10px padding to the parent div. But then why doesn't this thing work?
The margin: 10px 10px 10px 10px in your code moves the "Main" box as well.
If you want to move the box with id "first" only, use position:relative; top: 10px;
jsfiddle demo
edit: I don't know to say for sure why this happens but my guess is it is because the display of the "Main" box is block by default.
When you use display: inline-block; on the "Main" box, the problem is fixed. (jsfiddle)
This is how browsers interperit the code. It does not output the expected result which would be a 10px gap between the top of the child and the outter parent. You could add padding-top to the parent, alternatively you could assign overflow:auto; to your main div.
DEMO http://jsfiddle.net/kevinPHPkevin/2f4Kz/4/
#Main {
background-color: gray;
position: relative;
width: 200px;
height: 300px;
overflow:auto;
}
Another way around this is to add a transparent border around the main div (stops margin collapsing)
#Main {
background-color: gray;
position: relative;
width: 200px;
height: 300px;
border: thin solid transparent;
}
The third a final option (to my knowledge) is to stop the margin collapsing by setting padding-top: 1px; margin-top: -1px; to the parent div
#Main {
background-color: gray;
position: relative;
width: 200px;
height: 300px;
padding-top: 1px;
margin-top: -1px;
}
I'm trying to put three div together. One is on the left, one is in the middle, and one is on the right.
However, I'm experiencing a problem that the middle is not aligned properly.
My current HTML code:
<div class="three_contents">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div>
</div>
My current CSS code:
.three_contents{
width: 900px;
border: 0px solid #000;
}
.left{float: left;
margin-top: 25px;
width: 290px;
height: 290px;}
.right{float: right;
margin-top: 25px;
width: 290px;
height: 290px;}
.center{display:block;
margin: 25px auto;
width: 290px;
height: 290px;}
However, when I add a 1px border in the the three_contents div, and the middle div is aligned. I have attached two screenshots and hopefully someone can help me to resolve this issue. Thanks a lot.
Problem with the middle div isn't aligned:
After I add the 1px border, and the middle div is aligned:
Put the margin only on the center div. Like so:
.three_contents
{
width: 900px;
border: 0;
}
.left
{
float: left;
border: solid 1px;
width: 290px;
height: 290px;
}
.right
{
float: right;
border: solid 1px;
width: 290px;
height: 290px;}
.center
{
margin: 25px auto;
display:block;
border: solid 1px;
width: 290px;
height: 290px;
}
I made a fiddle to show you this: http://jsfiddle.net/stakL/1/
EDIT: To be sincere, I also don't quite understand why it happens. But I can see that the margin-top property set on the left and right div's was taking the middle div's top position as the reference point to apply that margin.
On other words, the center div was 25px from the top, and the left and right div's were 25px from the middle div's top.