The overlapping div with a class:
.eStore-product {
height:180px;
padding:5px;
clear:both;
}
I thought by adding clear:both; that this could solve the problem.
First of all, your iframe should not be placed within a p tag; iframes should go by themselves. Secondly, your .eStore-product has a height of 180px which is causing the problem. Either increasing that height or adding a margin-bottom: 100px; would solve the problem.
Unfortunately this solution is more a hack than anything. I feel you've got a bigger problem than just this one line. Try fixing the 8 errors you have on the page and you mind find yourself having to fix less of these bizarre problems.
Hmm strange behavior, I would try
Enclose the map frame in a div, and apply a padding top:
<div style="padding-top:110px">
this at line 226 and div clousure with the current closing divs at 228
</div></div></div>
it gives enough space. The current div scope seems right. I did a quick check on divs and seems right, but maybe a deeper revision could bring the problem with the clear.
I try to put margin inside the p tag, and the result is not overlapping
I hope it is useful for you
Related
I have an issue with the border-radius of div container2 for the links list with the resolutions at the top of the page like 240x320 etc. Its going around everything instead of just left-column2 and right-column2. Container2 is used a second time in the code without issue so i don't understand it.
At first i thought it was a problem with a closing tag but checked the code and everything is fine.
Heres my fiddle. Hopefully someone knows whats going on with it.
Maybe it has to do with the box-model . width + padding.
To include padding into width and use width:100% on child , you can switch the box model with box-sizing: DEMO
.container1,
.container2 {
box-sizing:border-box;/* add prefixed rules if needed */
}
SEE: W3C
It was pointed out that i had mistaken an open div for a closed div. Thats why i was having issues with the border.
I've never actually learned HTML or CSS properly, all of my knowledge comes from internet surfing and generally playing about with it. So i wanted to finally get some thing cleared up.
Firstly in my current 'messing about', i have a main div but that div will not sit at the very top of the page! It's at least 5 pixels from the top. I don't get it! I solved it once but i can't remember. There is an image of what i mean here: http://puu.sh/6jQUF.jpg
Here is the code:
HTML
<body>
<div id="Main">
This is a test.
</div>
</body>
</html>
CSS
#Main {
margin-right: auto;
margin-left: auto;
width: 900px;
height: 1200px;
outline: black solid thin;
padding: 20px;
top: 0px;
}
I'm sure it just something simple, i apologies for that.
Now another thing i have never understood is that in CSS can two divs sit beside each other, ie one has the float left property and the other float right thus pushing against each other and sitting beside each other, whenever i try this they end up ignoring the fact they are running into each other and both go to the left and right sides of the page.
I really hope i don't sound like an idiot I'm sure this is possible.
Lastly on the topic
If i have a main container how can i divs to stay in that container? I have tried this just by placing the div within in the container but that doesn't work.
Somebody please explain this, I would really appreciate that.
Thanks
The body has a default margin. Clear it with:
body {
margin:0;
}
jsFiddle example
If you want two divs to sit next to each other, either float them both left or both right, or make then inline, or inline-block elements.
I can't answer your question of "Lastly on the topic If i have a main container how can i divs to stay in that container? I have tried this just by placing the div within in the container but that doesn't work." as it makes no sense without code.
This happen because for default all elements has properties. In this case the tag body has some margin.
To avoid this kind of issues you can use a general Reset for this properties like this one Reset or the most basic reset:
* {
margin:0;
padding:0;
border:0;
}
Here the * helps to found all the elements on the DOM and set those properties to 0.
Try to keep one question per post. For your second issue I recommend to investigate the property display:inline-block and This Link to Clarify Floats
I have been trying to solve this for days but can't solve it. (I'm usually quite okay with css). The website is www.auralaid.com.
On the homepage, there is a white spacing which I want removed. The class that is causing this issue is flex-viewport whose height is always slightly more than the "gray fabric image" it contains, leaving a white space at the bottom.
How do I remove the white space?
P.S. I can't set a fixed height otherwise the contained image will be cropped when minimising the browser.
white spacing http://auralaid.com/wp-content/uploads/2013/11/Screen-Shot-2013-11-09-at-9.34.02-pm.png
you should post your code to get the perfect answer but i guess there is a problem of positioning of the div in which these two images are and also set height of image according to the div positioning.
Perhaps you should check your margins? We need the code to answer your question definitively.
For me it seems the h1-tag is responsible as with
.slide-content h1 {
display:none;
}
the white-space will disappear.
I am developing a website which is 100% height and width. There is a panel stuck to the left and the main content area to the right, which is scrollable.
However, in the content area the last div inside is getting cut off. I cannot see why. I have tested this on Firefox and Chrome, both are doing the same.
Here's the link to see it:
removed
As you can see, it is cut off, adding a large margin-bottom (50px +) seems to fix it, but that just looks bad.
PS: Don't worry about the missing images, it's because I've only uploaded this page, not the entire website.
Thanks in advance
Height: 100%; is fairly inconsistent across most browsers. Try to avoid it.
I'm not entirely sure how your layouts usually work, but setting overflow: hidden; on everything in your CSS reset is going to make things wonky from the start.
Take out "overflow: hidden;" and you can see the problem. Your content pane is matching the height of your body, as such, you're losing the height of "topBar" on the bottom of the page. because the Body is hiding the overflow.
Yup -- try overflow:scroll; or overflow:visible; In addition, I'd see if you can make it work without float:right;, 'cos that takes it out of the normal flow of things and can wreak havoc with your box adjustments.
ETA: I think I see the problem; each of your little content divs has floats left and right, which is gonna render margins useless, 'cos as far as the browser is concerned, each box's content is out of the normal flow of the page.
ETA(2): You have overflow:hidden; in your big first rule, where you set default styles for like a hundred different elements. That's your main problem. Change that to overflow:visible; (or whatever you prefer) and set appropriate overflow properties elsewhere and you oughta be good. I was able to mitigate the issue by doing this. There's still tweaking required, but that solves the base problem. I would still get rid of the inline floats, too.
From main-style.css line 5:
overflow:hidden
and main-style.css line 127:
overflow-y:auto
are both causing the page to cut off the bottom. However, when you correct this, it reveals that your wrapper div isn't stretching to 100% of the window height (because the background gradient stops WAY before the page ends), and the content inside your main divs go wonky. These are things that the other posters have discussed being major obstacles in your page formatting correctly.
Please take a look at this JsFiddle here. It is working in Chrome, FF, IE 6-8 and Safari.
Not sure how to fix the 100% height problem yet, but to solve the floated div content problem, make sure you declare a width of 50% on both the left and right-floated content
(also, you can make the right-floated content text-align:right in order to make it REALLY stay to the right of the div).
<div class="centerText messageWrapper">
<div class="messgaeHeader">
<div style="float:left; width:50%">
From: 12345678<br />
</div>
<div style="float:right; width:50%; text-align:right">
Date: 123456789<br />
</div>
</div>
1234567890
</div>
Perhaps someone could chime in with a fix for the 100% height issue this is causing now. I realize this isn't a complete answer, and my solution breaks the page in a different way, but perhaps it will be a jumping off point to you or someone else who may have the solution.
I can't for the live of me figure out how to get one element in my layout to be placed properly in IE 7. You can see the page here:
http://www.iancreates.com/debbie/contact/
Works fine in Firefox, but if you look in IE 7, you'll see the sidebar is beneath the body content. I've tried everything I could think of (floating both divs, changing width and margin/padding to account for IE box model) but to no avail.
Here's the relevant CSS:
.content-left {
width:670px;
height:auto;
margin:0 30px 0 10px;
padding:0;
float:left;
}
.content-right {
width:240px;
height:auto;
margin:0;
padding:0;
float:left;
}
I appreciate the help!
This is a classic IE problem, combined with a slightly impractical page layout.
You have set your peace-main div to have the width 100%, so there is no room for the right content beside it. In standards compliant browsers however, the div doesn't have any height (as it only contains floating elements), so it's not a problem that the right content ends up below it. In IE7 the div is expanded to contain it's content, i.e. the left content div, so it gets a height, and as the right content goes below it, it ends up below the left content also.
Just remove width: 100%; from the peace-main style.
Posting the CSS code would be helpful. Try using "position".
one thing you could do is set your peace-main to float 'left' and only have a width of 700px (so there is enough room for the sidebar)
then the sidebar should also have it's float set to 'right'
but i would actually suggest you try one of these methods :
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
#Guffa's answer is correct in my estimation. I think that your page may have validation errors also that are causing it to be parsed incorrectly. Looking at your markup, it looks like you had wanted div.content-right and div.content-left to be in the same container div, however they aren't, leading the the problem as #Guffa pointed out.
alt text http://i432.photobucket.com/albums/qq48/shiftypowers/source.png
If they were in the same container however, as I think you intended, then this problem would be solved as well. Try and fix this extra div closing tag, see what that does:
alt text http://i432.photobucket.com/albums/qq48/shiftypowers/validation.jpg