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.
Related
I ran into this issue while implementing a sticky footer solution. I have the footer working well, but my body element which encompasses everything within the tag just will not auto-extend beyond a random point further down that can only be reached by scrolling down (it's a lengthy page). My intention is for the body container (does that sound morbid or what?) to auto extend past all the div elements it contains. Isn't that what it's supposed to be doing? Right now there are still div elements sitting further down from where it ends, and the footer is sitting in the middle of my page right below it. If I can't achieve this behavior, I'll have to set the body to a fixed position in css, which I don't want to do.
Using the following CSS styling doesn't work, probably because my content extends beyond a page.
html, body {min-height: 100%; height: 100%;}
Can someone articulate what the most likely issues could be? Also, feel free to make any constructive comments on my code. This is my first web project.
Here's a link to my HTML code on CodePaste: HTML Code
And here's a link to my CSS code: CSS Code
Lastly, a link to a screenshot of my webpage showing the issue. Screenshot
The green bar is the footer, and the red border is the body element styled in css so it can be viewed. You'll see it ends right after the picture.
I'm pretty sure your main problem is setting the height of the body tag. Try not giving it a height (no max-height or height tags) or giving it height: auto to make it expand as its contents.
It could also be that you are setting child elements to positon: absolute which means that the parent will collapse to the size of whatever non-absolute elements are inside it.
Also, why the <p1> tags? They should be just <p>.
Code criticism:
It was extremely difficult to figure out what the problem was and I'm not sure that I gave the correct solution because of the way you showed your code. In future, try to give your code as a JSFiddle or a Codepen.
Also, consider using a CSS framework which will reduce the amount of CSS code you write a lot. I would suggest Bootstrap or Materialize but Bootstrap is more widely used.
Don't forget to follow CSS guidelines which will make your code more readable.
You could stretch the element to the full height of the window using vh.
.container{
height: 100vh;
}
You could then position your footer to the bottom using absolute position.
footer{
position: absolute;
bottom: 0;
}
I've used this in the past for full page landing pages that aren't meant to scroll.
I don't exactly know what the question is asking, but I experimented a bit and figured that if you remove the 1 from the <p1> so you would have a normal <p> tag, it moves the text up completely. I have a very rough JS Fiddle.
Thanks to all who contributed. Based on suggestions from Sankarsh and Ori, I was able to solve the problem. Once I changed my div to just as they suggested, I noticed it began functioning as I intended and forcing the parent element down beneath it. Unfortunately, that only solved the problem for that element alone. That led to me discovering the element had a default "static" position, while most of my other elements were set to "absolute". After changing the positions of the bulk of my content to "relative" or "static", everything is working as intended!
TLDR: If you want a child element to stay within the boundaries of its parent element, you need to set the child's position to "static" or "relative". You cannot use "absolute". This way, instead of overflowing beyond the border of the parent, the child will automatically extend the parent's border to its intended position.
I'm coding this site http://www.allrecht.nl/new , and running into the following issue: on the right side of the entire site is a space of about 40px - i cant figure out where its coming from .. can anyone help me with this?
It happended after i changed the width and margin of the #pricing and #container (so the table would be centered in the middle of the DIV). I've tried to adjust the body padding/margin but that doesnt do the trick. I didnt try to reverse the margin/width i adjusted on both DIV's bc i need them to be centered - so if you guys have a solution so the pricing table is still centered and also there is no spacing on the right side of the website, i'd love to hear it :D
Add box-sizing: border-box; to your #footer in css. You should use that as a global rule, so the blocks are not affected by padding. Use this link for explanation and examples! http://www.w3schools.com/css/css3_box-sizing.asp
thank you Dinca!! I also added a ';' after the padding in the #footer - together it works now :) Thanks a lot!
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 use some DIV to create blocks with data inside.
I've set them to "inline-block" because I want the div to adjust his width to the content.
IE8 adjust his width to my content but I have a weird problem.
If you go to this fiddle : http://jsfiddle.net/GvMW8/ and click to the first or second link, you can see that divs are overlapping.
If you go to this fiddle : http://jsfiddle.net/hhpRP/1/ and do the same operation, it works!
The only difference between these two fiddles are the 'id' attribute of the main divs.
I don't understand why I have this problem, but can you tell me how to make it works with the inline-block display AND a div id?
Thanks for your help!
Looks like a little IE8 bug.
Check out http://jsfiddle.net/willemvb/fjqUc/
I added an extra class for the div around bigBlock and made it display: inline-block.
I also shortened your javascript.
This seemed enough to make IE8 listen :)
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