(source: ctrlv.in)
I am facing this issue in my responsive design website,when i reduce the width of the browser less than approx 700 pixels.
i added margin-left: auto;
margin-right: auto;,but the output remain unchanged.If i put left:50%,it shows some weird perhaps position because my header is postion:fixed(though i have not mentioned its top/left/right/bottom anywhere else).
The logo "ilovetrolls" starts from the center of the page....and hence the center of the image is not centered.The page
(source: ctrlv.in)
Any help would be appreciated.Thanks a lot
just remove this style
#header {
text-align: center;
}
placed inline line no 428 in media only screen width 767
You need to change the display property of the #topdiv1 (on line 663) to display: block. I fiddled around in my Chrome web inspector and got it to work that way. Couldn't hurt to set the float to float: none either.
Take div.#topdiv3 and remove float: left and add in margin-left: auto; margin-right: auto. Then move div.#topdiv3 outside of div.#outter-wrapper
Try something like this:
<style>
.container {
margin-left: auto;
margin-right: auto;
/* To see the affect of the above; not part of centering implementation. */
background-color: #aaa;
width: 200px;
}
</style>
<div class="container">
Hello, world!
</div>
Related
I've been working on my website again, but have come across this very bizarre issue. Most of the chartcontainer's adjust to the width of the web page. However, the top 2 are being overridden by what looks like the element.style attribute as shown here:
This means that when the web page is first loaded: http://newton-poppleford-weather.co.uk/trends.htm, the width of the top 2 charts are wider than what the page allows for (100%).
I've tried to code style specific HTML after the 'div id="containerx"' to try and override it but that doesn't work. For example:
<div id="chartcontainer1" style="width: 100% !important">
I'm not sure how/if I can edit the element.style code as after researching it seems that this is set in stone.
Thanks for your help.
William
Add css this way
#chartcontainer1 {width:100% !important;}
The main reason for the horizontal scroll is that you have a 100% wide content and additional padding on left and right here:
#content {
width: 100%;
padding-left: 10px;
padding-right: 10px;
padding-top: 120px;
}
Change it and leave out the left and right padding to:
#content {
width: 100%;
padding-top: 120px;
}
I've got an HTML element that extends beyond the browser window to the right, and I want some spacing between it and the document edge.
The obvious (to me) approach would be to add padding to the body so there is some space around everything in the document. But, that doesn't seem to work for things that extend beyond the browser width. Adding a margin-right to the element doesn't work either.
This jsfiddle should illustrate the problem pretty clearly:
https://jsfiddle.net/sccottt/qjajhL05/2/
I feel like I'm spacing on something obvious here.
EDIT: Add width to the body
https://jsfiddle.net/swordys/2cwhudxr/8
<p>
Scroll that way →
</p>
<div id="wide-thing">
I want padding on this side →
</div>
CSS
body {
padding: 25px;
width: 1500px;
}
#wide-thing {
background-color: #cf0;
height: 100px;
width: 100%;
text-align: right;
}
Found a neat working solution in this answer: https://stackoverflow.com/a/22302368/749635
This code allows the body element to expand to fit whatever wide elements are inside it:
body {
float: left;
min-width: 100%;
}
sorry if the question title is weak, i can't quite sum my problem up into one snappy tagline...
I'm working on a website (using Joomla) and i've had to insert a DIV serving as a sidebar on the right side of the page. in order for it to be displayed "above" (or "over", i mean on the z-axis) the regular page content, i'm using a negative margin on the left side of it, covering the whole width of it, so it will simply float to the right and sit there, which works fine in ff and IE.
Since i've rarely ever run into issues with Chrome that were fine in IE, i didn't bother to check until quite late:
Now i see that in Chrome, the div is just sitting below (at the bottom of) the regular content; despite the "inline" display-types and the negative margin.
Now I've tried ridiculous things to make it work, but for some reason it just won't.
Can someone tell me how i can get it to work in Chrome?
HTML:
<div class="cframe">
<div class="content">
...
</div>
<div class="sideright">
...
</div>
</div>
CSS:
div.cframe {
display: table;
vertical-align: top;
}
div.content {
display: inline-table;
width: 751px;
padding: 60px;
}
DIV.sideright {
width: 200px;
float: right;
display: block;
position: relative;
top: 320px;
margin: 0px 0px 0px -200px;
}
...this is what i'm stuck with right now, it's all quite ugly.
[link to live-page removed as the solution has already been applied]
(The sidebar is the div classed sideright, and contains a module titled Archiv)
Thank you in advance
Change the div.content css to:
div.content {
display: inline;
float: left;
}
You're using float, but then setting the position to relative. You should remove the relative part of your css for the siderright and it should fix the issue
Edit: even better you should change the position to absolute.
Set your container div to position:relative and then position:absolute your sidebar in relation to that.
.cframe {
display: table;
vertical-align: top;
position: relative;
}
.sideright {
width: 200px;
position: absolute;
top: 320px;
right: 0;
}
I didn't test the answers above but I take their word that they worked. However, your question caught my eye, because I thought you were looking for a browser hack.
There are ways that you can tell an element to behave differently on a specific browser. This happens sometimes across browsers and the best way is to hack each individual browser and give them specific instructions. For chrome, of course you'll have to use a webkit.
This would be an easy example of the syntax to follow:
<p>TEST</p>
p {color:green;}
#media screen and (-webkit-min-device-pixel-ratio:0) {
p {color:red;}
}
Try the DEMO in several browsers and notice how only chrome will display it in red
I'd like to have a div that is centered on the document. The div should take all the space it can to display the content and the content itself should be aligned to the left.
What I want to create is image gallery with rows and columns that are center and when you add a new thumb it will be aligned to the left.
Code:
<div id="out">
<div id="inside">
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
<img src="http://www.babybedding.com/fabric/solid-royal-blue-fabric.jpg"/>
</div>
</div>
and the CSS:
img {
height: 110px;
width: 110px;
margin: 5px;
}
#out {
width: 100%;
}
#inside {
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left;
background: #e2e2f2;
}
Live version here: http://jsfiddle.net/anPF2/10/
As you will notice, on right side of "#inside" there is space that I want to remove, so this block will be displayed until the last square and all of it will be centered aligned.
EDIT:
Please view this photo: https://www.dropbox.com/s/qy6trnmdks73hy5/css.jpg
It explains better what I'm trying to get.
EDIT 2:
I've uloaded another photo to show how it should adjust on lower resolution screens. notice the margins on the left and right. This is what I'm trying to get (unsuccessfully so far :\ )
https://www.dropbox.com/s/22zp0otfnp3buke/css2.jpg
EDIT 3 / ANSWER
well, thank you everybody for trying solve my problem. I solved this problem using JS, with a function that listens to a screen resize event. The functions checks the size of the right margin and add padding to the left so all the content is centered. I didn't find a solution using CSS. If you have one, I'd very much like to know it.
Thanks eveyone!
Specify a width for #inside to center it. I used width: 120px. Fiddle: http://jsfiddle.net/anPF2/7/
Additionally, CSS should be used for the height and width of images, not attributes such as height="300". The fiddle reflects this change.
use of display:inline-block takes extra margins. To remove those set font-size:0px to the #out container. See the demo
This is what you want to achieve? demo
img {
height: 110px;
width: 110px;
margin: 5px;
display: inline-block;
}
#out {
width: 100%;
margin: 0 auto;
position: relative;
border: 1px solid red;
}
#inside {
position: relative;
background: #e2e2f2;
}
You shouldn't use Pixels when laying out your css, it makes it very rigid and causes possible problems for people with high resolution screens and low resolution screens. Its best to declare it as a % or em (% is still probably slightly better when working with widths, but em for height is perfect)
First, the "outer" div must be declared to be smaller than what it is inside. For instance if "outer" is inside body:
#outer{
width: 100%;
}
#inside{
width: 80%;
margin-left: auto;
margin-right: auto;
}
#inside img{
height: 110px;
width: 110px;
margin-left: 1%;
margin-right: 1%;
margin-top: 0.5em;
float: left;
}
Okay so, since "inside" is 80% of "outer"'s width, the margin-left:auto, margin-right: auto together make the "inside" div center within the "outer".
Setting the float property to left moves all the imgs of inside to always try to move left while it can.
EDIT: I fixed this after looking at your picture you provided.
I haven't tested this but I believe it should work, let me know if you are having more problems.
To make the boxes not go the entire width of the page, try setting the width less than 100% on #out and add margin:auto; to center it.
#out {
width: 90%;
margin:auto;
}
http://jsfiddle.net/anPF2/36/
Hi all
I have 3 divs with rollover images inside them stacked vertically inside my main content div. IE7 is chopping off about three quarters of the bottom div and I can't figure out why. It displays perfectly in all other browsers (even IE6) but IE7 just won't display properly.
This is my first website so I still have a lot to learn. I've managed to fix the other IE bugs but just can't figure this one out. Any help appreciated!
.main_content {
float: left;
width: 816px;
background-image: url(Images/evokedesign_bg_tile.png);
background-repeat: repeat-y;
overflow: hidden;
}
.portfolio_buttons {
float: left;
width: 634px;
}
Site link: http://evokedesignstudio.com.au/Portfolio.html
Now you posted a link to your live site, I found the answer very quickly:
On .gallery, remove the height: 400px rule.
Done.
This fixes IE7, and nothing changes in IE8/other browsers.
You have got your .page_container set to a fixed height of 730px.
Try updating the CSS to
.page_container {
padding: 0px;
min-height: 730px;
height:730px;
}
Same with the .gallery as #thirtydot said. Either remove the height all together or update it to min-height and height below (see above example).
By placing the height below the min-height in your stylesheet, any browser that doesn't recognise the min-height tag (IE6) will then register the height below it as a backup.