I have this website www.mydubaitrip.com and you can see that the booking panel is floating on the left side. What I want is to fix it at the edge of the booking panel. How can I achieve this?
I already put in an absolute position but it is not working.
Update:
Please note that I have a javascript function that automatically re-size the banner image width and height then automatically place the footer based on the new banner image height.
Remove margin and jist type
margin: 100px 0 0 0;
Get rid of the margin: 100px 0 0 56px; on .bookPanel.
Then, with the position still set to "relative", do top: 110px;
Remove left margin from .bookPanel, make it like this margin: 100px 0 0 0;
.bookPanel {
display: inline;
float: left;
margin: 0;
margin: 100px 0 0 0;
position: relative;
width: 264px;
z-index: 1;
}
If you want to adjust the top position you can reduce the top margin value which is now 100px
Related
I'm trying to get spacing before and after my background colour to my header. I can get the left side spacing by using:
header {
background-color: #888888;
position: relative;
left: 60px;
top: 3px;
}
But, when I want to add spacing to the right by adding right: 60px, It just ignores it and the colour reaches the right of the page.
Any help is appreciated.
What's about using margin instead of position: relative + top/right/left?
header {
background-color: #888888;
margin: 3px 60px 0;
}
<header>Header</header>
JSFiddle
About left/right from MDN:
When both the right CSS property and the left CSS property are defined, the position of the element is overspecified. In that case, the left value has precedence when the container is left-to-right (that is that the right computed value is set to -left), and the right value has precedence when the container is right-to-left (that is that the left computed value is set to -right).
It seems you need to set:
header{
background-color: #888888;
position: relative;
width: calc(100vw - 120px);
margin: 3px 60px 0 60px;
}
width: calc(100vw - 120px); is calculated width that equal 100% of viewport width minus 120px. after that you just need to set equal margins (60px) on the left and right sides
You seems to misunderstand the function of left or right. It does not just give you left or right space but moves / positions the entire element(header) to the left or right. It goes in hand with the property position: relative.
In your case you are just positioning the header to right first by 60px and then positioning it back towards left by 60px which brings it back exactly to the same position, hence no gap seen. This is not the right approach.
Instead just use margin to give you the space required like so:
header{
... left, right not needed ...
margin: 0 60px 0 60px;
...
}
I have a container with a repeating image that i want to fill 100% of the available height. Some of the inner divs have their :after pseudo elements absolutely positioned so i can get the borders the way i need them. This is causing an issue with the repeating background of the main container.
Please visit this link and scroll to the end of the page -
http://www.mariage-graham-audrey.com/static.html
Can anyone suggest a possible solution for this ?
Just a workaround but try to add larger bottom padding to layout like this:
.layout {
...
padding-bottom: 180px;
}
Just saw your CSS and I think by adding this you would be able to get a full page background :
background: white url("/bootstrap/assets/images/pattern.png") 0 0;
width: 100%;
margin: 0 auto;
padding: 30px 0;
min-height: 100%;
Just edit the " width:100%; " thats all.
Please Replace your style for layout div with this. It will work
.layout{
background: white url("/bootstrap/assets/images/pattern.png") 0 0;
width: 100%; /* add 100% width*/
margin: 0 auto;
padding: 0 0 150px 0; /*change padding with this*/
min-height: 100%;
}
I have a position fixed menu that is right inside my body, and is toggled hidden and shown via a button on the page the user can click. The problem I am having is this menu can get decently big (it pulls dynamic content via server) and sometimes it will be longer than the body, however when it spills over the bottom of the page, the page does not expand to scroll for it (it gets cut off).
I tried
body{
overflow-y: scroll;
}
which did not seem to effect it. Here is the css(sass) of the item itself.
.globalMenu
position: fixed
top: 75px
left: 50%
width: 350px
margin-left: -175px
height: auto
padding: 5px
z-index: 1001
background-color: #28282e
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
#media screen and (max-width: 600px)
width: 100%
margin-left: 0
left: 0
So I'm not sure what I'm missing here - something about how fixed works maybe? Thanks for reading!
Fixed items are taken out of the document flow, so even if its dimensions exceed those of the viewport, the containing element (be it <body> or any other descendants) will not accommodate it with scrollbars.
To put it in another way, the <body> element would have no access to the dimensions of the position: fixed element, and therefore assigning overflow property on the body will not have any effect of allowing users to access hidden content of said element.
Instead, assign the overflow-y: auto property to the fixed element instead:
.globalMenu
overflow-y: auto;
position: fixed
top: 75px
left: 50%
width: 350px
margin-left: -175px
height: auto
padding: 5px
z-index: 1001
background-color: #28282e
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
#media screen and (max-width: 600px)
width: 100%
margin-left: 0
left: 0
See proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/38bsqLsb/1/
On http://www.posterlion.com/ the left side disappears when you make the window smaller by the browser. The horizontal scrollbar appears though but I can't get to it anymore by scrolling to the left. The content is centered through a absolute div. How do i prevent this from happening?
position:relative;left:50%;margin-left:-517px;
width:1015px; overflow:visible; background-color: #FFFFFF; padding: 10px;
The best practice to centered tour layout is using margin: 0px auto instead of absolute positioning.
In your case you should remove your absolute positioning, create some div which contain all your layout (<div id='wrapper'></div> can be standard in this case) and set its margin to auto.
By:
#wrapper {
margin: 0px auto;
width: yourWidth;
}
In your given CSS add
min-width: 1050px;
Here is Css to update :-
#lwe {
width: 1015px;
overflow: visible;
background-color: #FFFFFF;
padding: 10px;
margin: 0 auto;
}
I have a div(InnerDiv) which contains a grid with paging enabled...
After some user actions , data inside that grid will load and we will have a big grid!
The problem is when grid's data loads , overflow the div's bottom portion(InnerDiv) and some of those data get's displayed out of the div.
my css of body and html like below :
html, body
{
margin: 0; /* get rid of default spacing on the edges */
padding: 0; /* get rid of default spacing on the edges */
border: 0; /* get rid of that 2px window border in Internet Explorer 6 */
height: 100%; /* fill the height of the browser */
border:3px solid red;
}
i need 100% height of body when page loads...
OuterDiv inside body like below :
div#OuterDiv
{
position:absolute;
width: 100%;
height: 100%;
/*height: auto;*/
margin: 0px;
padding: 0px;
top: 0;
bottom: 0;
left: 0;
right: 0;
border:5px solid green;
}
InnerDiv Inside OuterDiv Is Like Below :
div#InnerDiv
{
position: relative;
width: 100px;
height: 100%;
margin: 0 auto;
background: transparent url('../Images/Blue.png') repeat scroll left top;
}
Content Inside InnerDiv Like Below :
#Content
{
position: relative;
top: 10px;
background: transparent url('../Images/Red.png') repeat scroll left top;
width: 550px;
height: 1080px; /*>>>>>>>>>>>>>>>>>>> plz see this line*/
top: 10px;
right: 10px;
padding: 7px;
border: 10px ridge #ce004e;
color: black;
}
that grid(Content) is inside InnerDiv...
EDIT 1
the below example can show my situation :
Here's an example at jsFiddle
we can not remove position:absolute of OuterDiv , by doing that height:auto or height:100% on it does not work at page start -> outerDiv should be 100% because Of InnerDiv Background and remember InnerDiv height is not 1080px at start -> it is only 200px at page load and dynamically it will change to 1080px!
i want to force yellow area (InnerDiv) to fill entire Purple Area...
also InnerDiv Should Have 100% Height Because Of It's Background At Page Start...
i know this problem is about 100% height / but how can i fix that ?
EDIT 2 :
AT LAST HERE IS MY WEB SITE :
MY WEB SITE
plz change the height of red area with firebug - so by changing it to 1080px body and OuterDiv And InnerDiv Will grow.
but at page load i want body and OuterDiv And InnerDiv 100% height.
how can i do that?
thanks in advance
You need less constraints on #OuterDiv. By specifying top, bottom, left, and right, you're locking the edges of #OuterDiv to the edges of body; and your body rule locks body to the same size as the viewport.
Try changing your div#OuterDiv rule like this:
div#OuterDiv
{
position:absolute;
margin: 0px;
padding: 0px;
border: 5px solid green;
}
Here's an example at jsFiddle
From what I could gather from your explanation and styles you basically want this:
http://jsfiddle.net/sg3s/zXSXx/
If this is correct I will also explain what is happening to each div. Else please tell me what div is behaving not as you would like and why.
By the way if possible use absolute paths (whole links) to images. Seeing how they need to fit together will help us all to find something that works for you.