I've been looking at this for the past days now and I'm at the point where I need to ask for help.
http://cub.northnodes.com/index.php/about/mission/
I need the donate now column to float all the way to the right, but it only goes halfway. I can't figure out why it's stopping there, there's no containing div that ends there. I've tried to take it out of the #center div, and have placed it both before it with no better results. Placing it after the #center div makes it float left all the way beautifully, but below the #center where I don't want it to be.
In case others come later:
I had a similar issue where float right would only move halfway across its containing div. Neither it, its siblings, or container had position relative. However, the containing div's prior sibling also had a child with a float: right; (coincidence that it was the last child; not sure?). I solved my problem by adding a clear: both; to the div containing the offending floater. This was on Chrome.
This happened to me because I had set max-width on a parent container. I removed that and my element floated all the way to the right properly.
In my case clear: both; didn't solve a thing. Somewhere above there must have been a margin-right: 2em or something like that which was being carried over.
In my CSS then I just had to insert margin-right: 0px; and the image was then flush to the right side of the page.
Had a similar issue, Items were floating right/left/center (just not all the way right or center).
I fixed it by putting justify-content: space-between; in the parent container.
My final css for the parent looks like:
parent {
position: fixed;
bottom: 0px;
width: 100%;
display: inline-flex;
justify-content: space-between;
}
Related
Looking at the bottom example here, if you give .after-box a margin-top:5px it doesn't make a difference as it'll stay in the same location. But if you give .box a margin-bottom:5px it'll move the .after-box down. Why is it that on floated elements, their margin matters but other elements around them don't?
Hey margins don't move floated html elements, instead they push it away.
To give a fake margins on floated elements is to put the content inside another container then apply padding.
.outer {
float: left;
padding: 20px;
}
.inner {
//styles here..
}
So basically, I want two divs to sit inside another div. The first one is sitting inside with no issues, but the second one floats underneath the parent. When I add overflow:hidden I can't see the div anymore. The closest I've gotten to a solution was to add overflow:auto, but that just creates a scroll bar. I have tried resizing, different positioning, overflow and clearfix but so far I can't find a solution. Any ideas guys? JSFiddle demo here http://jsfiddle.net/QLbGc/ Thanks for any help, it's been annoying me for a couple of days now.
You forgot to put float:left; at the slideshow div
It should be
#slideshow {
background-color: #000;
margin: 15px;
height: 95%;
width: 60%;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}
So now you have the 'slideshow' div floating left and 'about' div floating right and they can fit inside the parent div.
Basically they were inside the parent div from the first time but the about div was under slideshow div.
Demo:
http://jsfiddle.net/QLbGc/2/
If you're looking to have the two divs side by side here's a fiddle for that.
http://jsfiddle.net/Hastig/QLbGc/6/
I stripped out a bunch of stuff as I wasn't sure you needed it or it was just stuff you were throwing at it to try and affect change.
Somebody mentioned you were missing a float: left; in what we assume you wanted as your left div.
Remember to compensate for margin and padding to match the container div.
In my example the main container was 500px wide. If I set each float div to 250px width when added to the 20px combined margins on those divs the total width goes to 520px and pushes that right div under the left div so you'll want each floated div at 240px to compensate. Same deal with percentages.
If I misundestood your intention and you're looking to hide one of those div use display: none; on it and double the width of the one you want to show.
try to put this code in your css.
.content::-webkit-scrollbar {
display: none;
}
I know this question has been asked many times but I am having difficulty in finding out in what is going wrong with the code in my case.
I have a wrapper div with a number of other divs contained within it. Some of those divs are side by side using float: left; ect. and the layout is almost exactly as I would like it. However for some reason the wrapper divs border is not extending all the way to the footer element when the wrapper is NOT float: left;
Example:
http://jsfiddle.net/8wVdm/
However when I add float: left to the wrapper div the border does extend all the way like I want it too:
http://jsfiddle.net/C5kTh/
However the problem with this is that the wrapper div is then not automatically centered. How do I fix this?
You'll want to research clearfixing, which is a set of css rules that force a container to wrap around any floated elements it contains:
.clearfix:after {
content: " ";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
here is a nice detailed answer on how they work.
here's an updated fiddle with a clearfix added.
after reading this article:
http://css-tricks.com/absolute-positioning-inside-relative-positioning/
i am trying to achieve vertically stacked divs each containing 2 child divs positioned to the far left and right of each parent div. i found the same concept here:
Position absolute but relative to parent
but I can't figure out why mine isn't working.The in-progress file can be viewed here:
https://dl.dropbox.com/u/10388895/newPeterSalvatoDotCom/index.html
Any help would be greatly appreciated.
One way to fix this would be to give the projectDivs a height. They currently collapse to 0. Add the following to your stylesheet and see what happens:
.projectDivs{height:600px}
I think setting these rules to the .projectDivs class get what you want done. Let me know if they don't.
.projectDivs {position: relative;
margin-bottom: 50px;
clear: both;
float: left;
margin-left:auto;
margin-right: auto;
width: 100%;
}
i set the margins individually because you have a margin bottom set already.
So I'm trying to code out my design for my new portfolio website, but I'm having a few issues there that research and hours of smashing my face against the computer screen have not yet solved. There are two big issues right now that I'm stuck on, though there is yet another that I'm currently considering if I even want to deal with at all.
The first issue is the menu. I want the typeface to go from regular to bold when you hover over it, or when you're on that page. Which works. Problem is when you hover over it, the other two items in the menu adjust slightly because the change in type weight pushes them out. My attempts thus far have all ended with failure.
The second issue is the footer. I want it to stay on the bottom of the page. My research has gotten me this far, but instead of what I wanted, now it actually stays at the bottom of the browser, not at the bottom of the content. Thank you for any help you can give!
The page in question can be found at: http://personal.justgooddesign.net/draft/
Your footer is getting jumbled up because you float left and clear right. My personal preference for footers always starts with this very clean method and builds from there. If you're getting confused, separate your inner content from the rest of the page and test away.
With fonts, you have to think more like a UI developer than a graphic designer. Unlike Indesign, Illustrator, etc, fonts and spacing aren't 100% pixel perfect. What will render one way in one browser will render a very different way in another. Bolding a font on the web will make it larger, and it will push spacing. To compensate for that, setup your menu elements to be a bit wider to compensate, then test like crazy. If you solely rely on margins and padding, then a bolded hover element is going to push the menu around every time.
Just a suggestion, setup your css in a separate file and load it in. The code will be cached, which will result in a performance improvement on subsequent loads. Further, you could save yourself a lot of code by doing one class to attach styling to your elements and being mindful positioning relative to other elements. There's no need to individually style every element in your portfolio for positioning.
You can fix the jump in the menu by setting a fixed width on the #menu li, so
#menu li {
display: block;
float: right;
width: 40px; //something like this.
padding: 0px;
list-style-type: none;
position: relative;
text-align: center;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
}
EDIT:
To fix the footer issue
remove height: 600px; from the #right rule
add a clearing br in between the #container div and the #footer div
</div>
<br style="clear:both;">
<div id="footer">
You have floating problems as you are not clearing your floats.
Your div#wrapper is always going to be equal to the height of the viewport.
Your div#container is collapsed beacuse you have floated div#left to "left", div#right to "right" and also have absolutely positioned div#footer. What this does is that, it takes these divs from the normal flow of the document and subsequently the div#contaiver is not "wrapped" around these three divs (div#left, div#right and div#fotter")
The same is the case with div#right. The div#intro and div#portfolio have been floated inside the div#right and it is not wrapping it's child divs.
Ther are many ways around these problems. I suggest this.
Include the following code after the last floated element.
<div class="float_clear"></div>
div.float_clear
{
clear: both;
}
For the menu, there is not enough space, Just add.
div#menu>ul>li
{
width: 50px;
}
Try this to fix your footer issue?
<p style = "clear:both">
<div id="footer">
Also
#right {
clear: right;
float: right;
height: 600px; //Remove this line
width: 490px;
padding: 0px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 0px;
}
add overflow:hidden to the container...
Whenever you have stuff that is floating, put a div around the floating content and give it
overflow:hidden;
display:block;
width: (some width);
That will fix most floating issues