Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Currently I am using Concrete5 to build a website, located here: http://tinyurl.com/cee5rvo
Firefox pushes the header (navigation and h1 tag) down on certain pages (such as Gallery) and I have no idea why.
Chrome and IE10 both display correctly.
Thanks for any help.
The best way to handle this is to add a line to your #content div.
#content {
overflow: hidden;
width: 800px;
}
The overflow hidden will clear the floats and stop the undesired effect of pushing the content down.
Your elements aren't taking up space correctly due to float issues.
add this to your css:
#content {float:left}
I think your problem is to do with how you're floating elements.
If you inspect nav-selected nav-path-selected in your nav, you'll see it's computed height is 0px.
This is a very common issue caused by floating elements not forcing their parent containers to resize automatically. When an element is floated, its parent no longer contains it because the float is removed from the flow. As browsers handle this problem in different ways, a common solution is to use a 'clearfix'.
If you add the following to your global css...
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
And add the clearfix to elements with 0px height (e.g. nav-selected), you'll see the element inherits the correct height.
You have a 10px margin on the div #asmillerGalleryBlock... set this to margin: 0 auto;
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
My container box does not have set height value. And I've got an element inside.
It's natural that the size of container stretch to the content (the element inside), but when I set it to float it does not, It just floats out of the container. Is there a way to set the float that the element still fit to the container, but just go say, to the right side?
Thanks for an answer.
.container {
}
.element {
float: right;
}
Try using the display: inline-block property on your container.
.container {
width: 100%;
display: inline-block;
background-color: #EEE;
}
.container .inner {
width: 100px;
height: 100px;
background-color: red;
float: right
}
<div class="container">
<div class="inner"></div>
</div>
if you are using bootstrap, you can add class clearfix to parent div of float element.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have 2 divs that are side by side and they have display:inline-block and they look great. I tried adding a textarea inside one of the divs, and it made it slide down so its not lined up next to the other div anymore.
This is what it looks like right now. How can I fix it?
You are pretty close. Here is the code and a link to the fiddle.
div {
width: 100px;
background: gray;
height: 200px;
display: inline-block;
vertical-align: top;
}
textarea {
margin: 0;
padding: 0;
width: 50px;
height: 50px;
display: inline-block;
width: 100%;
border: 0;
}
I added vertical-align: top to your divs and textarea and set the width to 100%. I also set the border to 0 because it overflows by 2px.
Just add display:block to the textarea and it sholud be fixed.
You can check it here -> https://jsfiddle.net/h0mwo9ox/4/
Quick suggestion, if you can, it is better to use specific classes instead of a generic div style, specially if your project became big it is better to manage then.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have an issue with my webpage. The issue is that the content go under the footer.
See my issue here
http://www.webdevout.net/test?0138
The container is
height:100%
position:relative
while the footer is absolute and bottom:0;
I thought footer was made this way, what am I missing? I need the footer to have 50px(may be) distance from the content always.
You don't need absolute position in that case, because you just want to follow the correct page flow ; absolute position doesn't take other elements in account, so it is logical that your footer is hover your content.
Simply remove absolute position and add some margins. ;)
If you remove the position absolute from the footer you'll be fine, then place a margin-top of 50px;
div.footer {
height: 70px;
width: 100%;
padding: 10px;
padding-left: 20px;
background: #F2F2F2;
border-top: 1px solid #ccc;
clear: both;
margin-top: 50px;
}
Since the .footer has position absolute, it wont "push" the html-content further down.
If you add
padding-bottom: 40px;
to
div.main{
It will look allright.
This makes .main bigger
div.main {
width:800px;
min-height:400px;
margin-top:40px;
padding-bottom: 40px;
padding-left:20px;
}
After checking with Firebug, I found that removing "position:absolute" from div.footer class in your CSS, solves the problem.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
im already finished with the site but i got a lil problem.
i would like to put three hover boxes on the top of the icon box and text as u can see on this pic.
the problem is that if i do a new div box its on top of the #webicons box .
would be nice if ya could !
Here is the actual status. http://www.awesom-media.de/umgebung/index.html
jsfiddle.net/D6V6R/
This solution work's though I dont think your lis in the #referenzbox are the correct dimensions as currently they are too big for all to fit on one line.
Currently the container has a width of 1200px and the three lis at 400px plus padding are to wide for this.
If you white-space: nowrap; on #referenzbox ul you can see this issue.
Personally, I would close #block-container just before #referenzbox and set width: 100%; on this #referenzbox.
You can adjust the sizes to fit your needs.
#referenzbox {
height: 400px;
background-color: red;
clear: both;
width: 100%;
}
.webdesignbox {
max-width: 520px;
float: left;
min-height: 545px;
margin-bottom: 30px;
}
In short, as you floated the icons, you needed to clear them on the next div with clear: both;
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
How do I properly center the menu on this page http://bit.ly/An65z5? Been poking at firebug for over an hour now, please help :)
Remove the float: left property from #top-menu, set the margin: 0 auto; and add a width. You can also remove the padding on the left of #top-menu as it isn't needed once the nav is centered. So it should look like the following:
#top-menu {
width: 300px; /* 300px will need to change to the actual width of your nav element */
margin: 0 auto;
padding-top: 10px;
}
In your style.css, add the append the following lines of code in the end.
#top-menu {
float: none;
padding-left: 0;
padding-top: 10px;
width: 271px;
margin: 0 auto;
}
To avoid harmful need for limiting width of container, use display: table for centered block and display: table-cell for its child elements.