I'm working on a website at the moment where I have four sections with various divs inside them, but content from the third is overlapping content from the second, like the height for the second is not automatically adjusting to its content.
With there being a lot of code for this its difficult for me to demonstrate the whole issue in jsfiddle, so a live example of the issue can be seen at www.nickcookweb.co.uk/test, where the 'Blog' title section overlaps the services grid from the previous section.
(PS. I'm aware there are also many other issues...Still working on them and will most likely post more questions)
You're floating all your .service divs and never clearing them.
You can do the following to resolve it...
<div id="servicesGrid">
<div class="service"></div>
<div class="service"></div>
<!-- etc... -->
<div style="clear: both;"></div> <!-- Solution -->
</div>
While a div will expand to fit its content by default, a float changes this behavior. Without a clear, it will pretend that those floated elements aren't even there. We can address and fix this by doing a clear: both; after our last floated element.
I changed the position of the servicesGrid to static and that seemed to do the trick:
#servicesGrid {
position: static;
}
Edit: Here is someone with a very similar issue: Floats inside absolute positioned div
Related
My question is highly related to this previously answered question. In fact, the solution provided by #harpo in the comments of the top-voted answer was a partial solution for me. However, I've found that it actually doesn't work on some of my elements, in particular, elements that have borders.
Some context: I'm using Bootstrap for my page, and I have a fixed navbar on top, then a page with a load of unstyled divs and .panel divs inside those divs. I have a top padding of 60px on my body which pushes everything down to account for the navbar. However, when I click on a link with an offset (e.g. example.com#div2-1), the top of the div is still covered by the navbar.
Using the solution provided in the linked answer above, I put 60px of negative padding (pulling the element up by 60px) on the :before element, then push it down by 60px again by setting the height to 60px. This creates no visual difference (intentional) but the calculated height of my div is now 60px taller, with the div starting 60px earlier than it should, and the real content starting 60px later. This essentially offsets the content for the navbar again.
However, I've found that on elements that have a border, such as my .panel elements, the border seems to contain everything, and the :before pseudo-element I have no longer has an effect on the calculated height of my div, which means it gets covered by the navbar again.
Here's my code on JSFiddle: http://jsfiddle.net/rszqtw80/3/
If you take a look at the rendered result in any dev tool, you can clearly see that the :before element is properly created and has the right height (60px) for both the outer and inner divs. But for the inner divs, the overall calculated height of the element ends up not including the :before element. Disabling the border with Chrome Dev Tools makes it work for me, so I've deduced that the border is the problem.
So my question: is it possible to get this CSS-based offset to work with my .panel elements without losing the border or having to go back to inserting a tags everywhere? Because quite honestly, without the border, the .panels look quite ugly, and nesting every div in an a tag is also quite ugly.
Thanks in advance!
EDIT: Rewrote my question slightly to hopefully clear up any misunderstandings about my intent. Sorry for my confusing explanation :(
FURTHER EDIT: I've added 3 screenshots that hopefully demonstrates this better than any words can ever hope to do. I would've added it here, but I can't add more than two links due to lack of "reputation".
You don't really need the :before tag for this.
jsfiddle.net/rszqtw80/8/
For your explaining: The > selector selects all direct children of your element.
.first-element > .all-direct-children
<a class="first-element">
<div class="all-direct-children">
<div id="notthisone" class="all-direct-children">
</div>
</div>
</a>
The element #notthisone won't be affected from your changes.
With nth-child, you can select whatever child you want. In your case, I used this to give the first anchor after Div 1, Div 2, etc. A margin-top of 0, So that it's not seperated from your heading(Div 1, Div 2), etc.
After consulting with multiple people, I simply gave up and nested my divs in another div like this.
<div class="container">
...
<div id="div2" class="anchor">
<div>
Div 2
</div>
<div id="div2-1" class="anchor" >
<div class="panel panel-default">
<div class="panel-heading">
Div 2-1
</div>
<div class="panel-body panel-collapse collapse in">
...
</div>
<div class="panel-footer">
...
</div>
</div>
...
</div>
</div>
...
</div>
I was hoping to avoid adding yet another layer into my DOM but it seems there's no helping it.
I am trying to build up a website with a Navigation bar on top of the page. It should be fixed on top of the browser when we scroll the page (like facebook or twitter), but not scroll with the page(like google search??). see Fig like:
seems like we should set the css attribute position of this navigation bar like
#nav_bar {
postion:fixed;
}
but why all those websites use a whole bunch of div to do this? Does all these divs make any sence? Like twitter:
where topbar js-topbar is the outmost div which size is 1583*40px, but I didnt find the definition of its size. And then it goes to global-nav->global-nav-inner->container, finally...container, which is acutually hold the navgation items like a list, a search bar so on and so forth. something Weired is that the size of it is 865*0px. For more information, you can view source of the home page of twitter.
And my question is : but why all those websites use a whole bunch of div to do this? Does all these divs make any sence? Why is a div which height is 0px can hold those navigation items?
why the 'many' divs?
The general idea is the more wrapping elements you have the more flexibility you have with regards to what you can achieve in styling with css. Obviously there is a limit, as you should also try to keep your markup readable and semantic. I would say many important or segregated regions in a site would benefit from three wrapping elements:
<div class="positioner">
<div class="padder">
<div class="alignment">
Menu Here
</div>
</div>
</div>
Obviously with the more semantic HTML5 elements you can make this more readable:
<header class="positioner">
<div class="padding>
<nav class="alignment">
Menu Here
</nav>
</div>
</header>
The reason for keeping a seperate element for padding is so that you can set specific dimensions to your positioner (i.e. header) and not have that calculation messed up on certain browsers (with old box modles) by the addition of padding.
The reason for keeping alignment seperate is because it will give you greater flexibility on the alignment tricks you can use.
The reason for using the header element is because this content will act as a header imo.
The example you give above, each element will most definitely have it's reason for existing and they will most probably all be used to achieve the layout the designer wanted with regard to css. Some times extra wrapping divs are also used as placeholders for content that may be AJAXed, this is probably quite likely when dealing with the likes of Twitter.
You can of course get away with using only a single wrapping element, but you will be limiting what styling and positioning you can achieve later on down the line.
why the height 0px?
There is a trick often used with positioning absolute layers in a relative location (rather than an absolute location) - and I believe this is the reason why you are seeing this, but the trick in itself isn't the actual cause of the height:0px. The trick uses the following construction:
<div style="position: relative;">
<div style="position: absolute;">
The content here will float outside of the document flow,
but remain in the correct location within the document flow
- in all viable browsers.
</div>
</div>
If you inspect the above construction, using any browser debug method, you will notice that the position: absolute; layer has collapsed to have no height (in modern browsers). This is the default behaviour of position absolute outside of the old Internet Explorer world (with no other positioning or dimensions settings), because an absolutely position element is taken out of the document flow and by default doesn't calculate anything to do with it's children.
If you wish to override this behaviour you can simply use overflow:hidden; (as long as the height has NOT been specifically set to 0px by some other class or by JavaScript) - this will force the element to calculate the dimensions of it's children and wrap them.
First of all use position:absolute; if you don't want it move with you when scrolling. position:fixed; if you do.
Second of all when you build a website the first thing you're going to have to do is decide how the structure of your website is going to look like. So the menu at the top will be
<div id="Menu"> </div>
Now you may want to create a header under it
<div id="Header"> </div>
Under that you want to share content, since thats what website do.
<div id="Content"> </div>
Under that you may want a footer, that says 2012 Copyright etc.
<div id="Footer">2012 Copyright zoujyjs © </div>
Now you may want to center everything. Why not just put all these previous divs inside a wrapper div. Then all we have to do is center the wrapper div.
<div id="Wrapper">
<div id="Menu"> </div>
<div id="Header"> </div>
<div id="Content"> </div>
<div id="Footer"> </div>
</div>
You could also add stuff like a logo inside the header, etc.
I think you get the idea. But isn't it obvious you're going to get "divception" then?
Also: When no height is specified on a div, the div will automatically resize with the content within.
<div style="background-color:black;">
<!-- Nothing will be seen on your page, because the div is 0 height, 0 width by default -->
</div>
<div style="background-color:black;">
Height of the div will now be the same height as the height of this line. (15 px by default I believe
</div>
I was hoping someone can take a look at my site and tell me what may be going on here. The problem I'm having is that the #bodyWrap div is not automatically stretching to the height of one of it's children, #contentWrap. #contentWrap stretches fine to fill all the content on that page, but this does not bubble up to the parent, #bodyWrap. Thanks in advance for any insight.
http://www.jacobsmits.com/placeholderRX/index.html
You must add a clearer div before your closing containers:
<div style="clear:both;"></div>
Floating items won't affect the height of the container...coz it is floating ;).
Working Live Example : http://jsfiddle.net/LBH5h/
Example :
<div id="content">
<!-- floating child --> <div style="float:left;"><!-- floating child content --></div>
<div style="clear:both;"></div>
</div>
If something usually won't auto adjust the height for me then I will troubleshoot with these steps.
Set the height to something ridiculous (1000px)
If that make a difference then check all floats
Add a clear:both; statement.
If it's still not working, add separate border colors to all of your divs. It should help you out to see whats setting the height properly and whats messing up the website.
I'm trying to stop my sidebars from leaking into the footer area and I've tried lots of suggestions none of which seems to work.
I'd consider JavaScript if need be, but would rather use CSS. Here's an example page, I wondered if you check with a code inspector? The left & right nav are positioned absolutely for the background image to reach the end above the footer, and the contents are floated.
I want the contents to be able to expand without running into the footer.
I just can't figure out how and no-one else seems to either so this is a last try!
Looks like you need a sticky footer.
From what I can see, you only need the absolute positioning of the side-bars because of the shadow on the middle box.
For older browsers I would make #middle wider to include the background and give .inside the necessary margins to separate it from #middle (and to give it one of the backgrounds).
For modern browsers I would just use a box shadow.
Of course all in combination with just floats, no absolute positioning.
Like Jeroen said in his comment. Change <div id="left-container">, <div id="right-container"> and <div id="middle"> to float:left & position:relative. If you do this you will need to change the order to <div id="left-container"> then <div id="middle"> then <div id="right-container">. Some box model tweaking may be needed but your footer should now clear those elements. I almost forgot to mention to remove the margins on the divs.
I have been coding a design I had been working on for a week or so and have core across a snag.
While doing the HTML/CSS of one of my right column modules the content within it expands however the bg and bordered area it is within does not.
htttp://www.gamefriction.com/Coded/ (url with example)
http://www.gamefriction.com/Coded/css/style.css (css stylesheet used on page)
This website is purely HTML and CSS at this time all code can be viewed through the View Source option on all browsers.
The area that is not working properly is the bullet links in the right module with the blue background that says "League Menu".
The content above that will make the module background expand however the linked bullet menu will not.
Before doing anything else, pick a doctype. The one you have right now defaults to quirks mode in all browsers which, quite frankly, is going to give a lot of interesting results depending on what browser you are viewing the site in.
I'd recommend html 4.01 strict, but some people like the xhtml strict option as well. Either way, make sure the doctype is formatted correctly. Otherwise it's still going to default to quirks.
Once that is done you'll have a set of rules that are dependable that you can work with.
UDPATE:
Okay, now that you have a good doctype. Add another div inside the league_menu_links to clear the floats from the league_link_wrap divs. exa:
<div id="league_menu_links">
<div class="league_link_wrap">some text</div>
<div class="league_link_wrap">some text</div>
<div class="league_link_wrap">some text</div>
<div style="clear:both;"></div>
</div>
That will signal to the browser that the floated divs are to be contained by that outer div and cause the outer div to expand accordingly
Since you're floating the elements inside the #league_menu_links div, it is not expanding with it's children.
One hack-around would be to add an empty div with clear:left; as the last element child of #league_menu_links, like so:
<div id="league_menu_links">
<div class="league_link_wrap">
...
</div>
...
<div style="clear: left;"></div>
</div>
I also suggest using ul and li instead of divs, in that situation. It is a list of items, after all.
Instead of using the clearfix method, many people also add a style declaration of overflow: hidden; to your div#league_menu_links.
This will make that div know the height of its children and wrap around them. The one downside to this is if in the future you give that wrapping div a defined height, then the content will appear to be cut off.