I have a page with some divs that have a width of 800px and margin: 0 auto
to center them.
One of the divs contains an image and the rest of the div is empty, in IE8+ it looks
as well as all other browsers, but in IE7 the empty area of the div takes space and throws other elements off their place,
is there a quick solution for making the empty area of the div not take space?
the reason I have to keep the blank area is that the fixed with and margin: 0 auto make
the picture align with the other divs that have the same width.
thx in advance!
Try setting line-height:0 and font-size:0 for that element.
It should make the element occupy no space..
just wanted to tell anyone reading this post, what I did in the end is put an Internet Explorer conditional comment as nothing seemed to solve the problem.
another thing that is possible is to make one of the DIVs' position absolute and then it's
outside the normal flow, but I couldn't find a way to make the empty part of the DIV not take
space in the normal flow.
Yes it does...just put ; after them
I just had the same problem on IE7 and used the answer
line-height:0;
font-size:0;
in the CSS corresponding to that div
Related
I've looked around for answers and I've tried plugging in everything I can think of, but I can't seem to figure this one out. I feel like I'm probably overlooking something really simple and obvious, but any help you can give would be really appreciated!
Basically I'm trying to customize this page so that the little character boxes are horizontally centered within their .wrapper div.
While the div itself is centered horizontally in the middle of the page (I've used padding: 0 15% for that), the content inside it is not.
Here is a pastebin of the entire code if anyone would like it. The relevant section is line 140. Thanks in advance for any help you can give!
The problem is the div containing the individual character boxes are using absolute positioning so any style you try to use on the wrapper div that contains them to center them will be overwritten by the absolute positioning. You could probably change the javascript that is writing the absolute positions to center the boxes in the wrapper div or you could possibly pad the wrapper. I was playing around with the numbers and had a couple boxes centered within the wrapper div but when it's resized the javascript rewrites the positions. I would've used bootstrap to make this page instead of using javascript to reposition things on resize.
Another alternative is
1) Remove padding on your wrapper div and set text-align center
2) For each of the character box, I am not sure what you are using the javascript for. If the javascript have no other use other than making those boxes horizontally center, you can remove it.
.chara remove the float center, remove height, add display inline-block, add padding 25px 0
3) .charaimg remove position relative, remove top, remove left
4) .charatitle remove height, remove position absolute, remove bottom 0
5) In your HTML switch the .charaimg and .charatitle
That should do.
And also for future question, it helps a lot if you can put your code in codepen or jsfiddle. It makes life easier for people who are helping you.
I have a webpage with links down the left hand side of the page in a div that is floating left. I then have content to the right of that that is in a div floating right. The problem I'm having is that when the page is resized the content moves below the links.
I have tired putting the whole page in a wrapper div but when I did the links stopped working and I could not position the content where I needed too.
Here is the css for the wrapper div
#wrapper {
margin:0 auto 0 auto;
min-width:960px;
}
Floated elements will behave in that manner, since they're out of the page flow.
What you probably are looking for is a fluid two column layout.
The main problem is that you are giving the divs fixed widths so the first step is to change the widths of the divs to % or em.
Do this full screen to begin with, I would even go as far as creating a blank page with no content what so ever, just give the divs a different background colo(u)r. Do this as you then know the width of the content isn't interfering.
I would also float both divs to the left and maybe position them relatively to begin with.
I figured out the best way to go over the window resize issue is do like wordpress and even this site do: put balnk resizable margins around the page and make all the content fixed width.
"Liquid" style (with percents etc.) is cool but doesn't really look right most times, so the best thing is to build your page a little narrower than the full window and let different brawsers just change the margin size.
To do so I actually style the very html tag givin it a fixed width like 1000px or whatever and then margin-left:auto; margin-right:auto; to keep it always centered.
EDIT:
Put this in your css
html {
width:66em;
margin-left:auto;
margin-right:auto;
}
This is my example on jsfiddle http://jsfiddle.net/YG6tx/5/
so my question is, why is the red div(pageWrap) not taking the height of it's inner elements?
If I specify a float:left, it takes the height, but the margin: 0 auto no longer holds.
how can I acheive both? (margin:0 auto + the div needs to take the height ).
Do I need to specify the height explicitly?
I'm a newbie, so this question might seem simple.
Designing with floats and absolutely positioned element is hard... Their parent elements won't wraparound them so often you'd have to specify the height attribute on the parent to accomplish the look you want. However, the .topLeft wouldn't exactly need to have the float:left; property. If you remove that I think you'll get the desired look. Example: http://jsfiddle.net/YG6tx/8/
Just give overflow:hidden to #pagewrap.
Try this updated fiddle: http://jsfiddle.net/YG6tx/12/
As in you original fiddle there were no images due to incorrect path of images so in my fiddle also no images but as per your requirement i have changes the layout.
As per your requirement images are at position, red div taking entire height as per elements inside and center also margin:0 auto;
If i am lagging some where please comment so i can change as per requirement.
Here's a sample of what's not working: http://jsfiddle.net/EJuzv/29/
I need to wrap everything within a div so that I may give a width, and center with margin:0 auto;. As it is, works in every browser except IE6. Everything I try results in losing my sweet divs that extend 100% to the stick footer.
Can anyone crack this case?
You may very well have tried this approach already, but maybe it'll help you crack this problem. Absolute-positioning the header against the top-left corner is unnecessary and just forces you to pad the "container" holding your three colored elements.
http://jsfiddle.net/piersadrian/mKQ89/1/
I have an issue (code is dynamic so difficult to print - I hope this is simple) whereby when a parent container div contains 3 div elements floated left, yet the if the 3rd div goes beyond the body of the page (i.e. the browser's width) it line breaks to go underneath.
I want it to float: left whatever, whether it goes past the 'end of the browser' or not. Is this possible?
Example code:-
<div id="container"><div id="divLeft"></div><div id="divCenter"></div><div id="divRight"></div></div>
Where all the divs left, center and right are float: left;
Yet #divLeft will break to go under divCenter if it's width goes outside the browser width.
Any help much appreciated!
The best way to be sure is to set a fixed width to your div here.
An example here
#container{width:306px;display:block;border:1px solid black;overflow:auto;}
#divLeft, #divCenter,#divRight{float:left;border:1px solid red;width:100px;}
Don't forget the overflow:auto on your container if you want to apply a background or a border, else it won't be under your divs.
it seems the divs don't fit in container div, and the last one floats under them. this is how float works. you must arrange the widths of them.