The background color of <ol> list is not displayed properly. This problem started after I floated label left and input right. How to fix this. The expected result is:
Here is my result: http://fiddle.jshell.net/WZ3nM/1/
Similarly I've problem with the div .wrapper. The shadow should be way below the content and there should be a white color background beneath <div class=.col-2>.
You need to clear the float, before you close your <ol>
Check it out here.
http://fiddle.jshell.net/WZ3nM/5/
Whenever you float things you must clear them at the end so that it can calculate the height properly
I modified your code and added a third <li> with the following style:
clear:both;
Your float was taking elements out of the document flow and this the background color didn't know where to end.
Hope that helps.
As others have suggested you can clear the floated content - although this will add another element. You can also add
li{overflow:auto;}
which will prevent the list from collapsing. In IE6 you will also need the rule
li{height:1px;}
http://fiddle.jshell.net/WZ3nM/9/. This method does not require a clearing element.
Related
I have a problem that i don't know how to fix.
This is my JSFiddle code.
I don't know how to get all of the items inside the top bar properly.
There also happens a strange thing: when i put some text inside the ID=toplogo, all the elements shift a bit. What causes this problem and how can i fix it?
please help
Edited your fiddle.
Basically I added:
overflow:hidden
..to your inline-blocks and set
line-height = height of block
..to align the text instead of using padding.
Check out the edits here
why you use padding-top for those login and signup ?
It is suggested to use <ul> instead of div's for menu
You want to achieve like this ?
check this fiddle
I want to create a button/link that is centered in the content area of a webpage. Because it's a button, and not just a link, I'm adding some padding and background colour to it.
The link is centered horizontally, but the padding seems to expand outside the line-height of the parent element, causing it to overlap with previous/next elements. See: http://fths.convoke.info/what-can-i-do/
I tried creating a fiddle, but wasn't seeing the same issue: http://jsfiddle.net/convoke/g9wu6ws9/
So what am I missing? Conversely, is there a better way to center a link like this? I don't like using margin: auto because it requires you specify the width. Ideally the width would be dynamic, so if the text on the button was longer or shorter, it would remain centered.
In this case, the answer I needed came from user #CBroe in the comments of my original question. He suggested using display:inline-block and that worked like a charm.
Still unsure as to why I was getting different results on the fiddle vs the actual website...
I have a container div that contains an unordered list, that contains multiple li's (simplified to one in the fiddle for simple demonstration). Basically the text in the li's is spilling out over the containing div, which is odd because I added
white-space:normal
which is supposed to mitigate the issue, but clearly doesn't, see http://jsfiddle.net/hQA6u/.
I then tried to give the li a set width, but that doesn't work either.
Basically, I just want the li's text to not extend past the maroon/brown color, and have it break into multiple lines.
Thanks for all help!
jsFiddle
word-wrap:break-word;
this will do the trick
Just add "overflow:hidden;" to your css, or you can use "overflow:scroll;" to make div scrollable.
Hope this helps.
I have a bunch of anchor tags containing images and a h1 header. I have apllied the float element to allow them to layout in rows of 2. For some strange reason though, the milky way link is causing the next anchor to float right. If you swap the milky way with saturn, it works fine. I can't for the life of me figure out why. Can anyone explain this strange phenomenon to me?
Here's the jsfiddle for my page: http://jsfiddle.net/SVuQQ/
If you add clear:both to the Andromeda anchor it will fix the float issue. I set it up so you can just add the .clear class to any other anchors that might need it if you add more.
Explanation: An element with clear:both prevents elements to the left and right with floats from having an effect on the flow of the page layout. In this case, the milky way anchor float was having an adverse effect on the elements below. By adding clear:both to the Andromeda anchor, the Milky Way's float is no longer pushing down the rest of the elements.
Alternative Solution: The float issue is happening because you have anchor tags with different heights. They can't stack properly because one float is pushing down farther than the other. If you set the same height for all of them it would fix the issue without clear:both. jsfiddle.net/SVuQQ/7
I suggest try to set your #subject-content a-menu {height: auto}
and remove float:left at the same line (e.g #subject-content a-menu)
If you look at my Jsfiddle Example, the float seems to disregard the title text that is to the left of the floated element. My goal is to make the floated element not overlap the title text and to stop once it reaches the end of the div which is the title text
My questions, is this possible?
I just do not want it to overlap the element which is to the left of the floated element.
Thanks in advance for the advice, suggestions, etc.
Jsfiddle.net
Remove Position: Relative from your #advertisement_1 div, and in the HTML put it above the title div.
Below is an updated JSFiddle with it working, you may need to adjust the "top" value in your CSS for the advert box if it needs to be different to what is in the fiddle.
http://jsfiddle.net/f5j2z/