The default layout page I get in a MVC razor has a problem with the section tag being smaller than its contents. The issue is I have a large table inside of it, and it is running out of the section, rather than the section simply becoming wide enough to fit it. I have recreated the issue in jsFiddle. You can see that the blue box is much thinner than the red box. The blue section being the initial size of the window, but if you scroll right, then you see the table is wider than the section.
How do I get the section to widen to match the size of its contents?
<div class="page">
<section id="main" style="background:blue;height:50px">
<table style="width:1000px; overflow:auto;background:red">
<tr><td>lkjlkjlkjlkjjhgjhgjhgjgjhgjhg</td></tr>
</table>
</section>
<footer>
</footer>
</div>
http://jsfiddle.net/sDG8n/1/
Float the section to the left
<section id="main" style="float:left;background:blue;height:50px">
Try putting the overflow:auto on the section instead of on the table.
The Spec says you're doing it wrong:
The section element represents a generic document or application
section…The section element is not a generic container element. When
an element is needed for styling purposes or as a convenience for
scripting, authors are encouraged to use the div element instead
In other words: Use a DIV.
Related
I have an image that is floated right full screen and comes below the main content. However, on mobile I want the image to be above the content and not below. Take into consideration that in my HTML the image is listed below the main content. Any suggestions would be amazing.
Html Code
<div class="wrapper">
<div class="main">
Main stuff
</div>
<img src="image.jpg>
<div>
You can use "display:flex" for the parent div which wraps your image and your text. And the property "order" for your child elements. If you want to switch the position of the element, you can change order depending on media queries.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
I'm creating a bootstrap template and I'm having a problem.
The section id="content-one" shows up on the top of the page. It doesn't seem I can find a solution for this to place it under the full-screen header.
Needs to be positioned here:
pic
Here is the code: http://codeply.com/go/8iYGenpntB
The problem is that elements within <section id="hero"> are absolute positioned, which take them out of the normal document flow and other elements will ignore their positioning on the page (i.e. pretend they're not there). That is why <section id="content-one"> is above the "main header", i.e. <section id="hero"> content. The elements that have absolute positioning are .hero-wrapper and .hero-container.
I'm not sure what the final layout should be or the requirements upon it so it's hard to recommend much beyond pointing out the source of the issue. You could possibly use padding and margin only to get <section id="hero"> the height/size you'd like.
*This is just a general question prior to the development, hence no code provided.
I want a div in the middle of my site to have a background width of 100% in order to go all the way across the screen, but this div is INSIDE the wrapper/container (of which has a 980px width) so it's restricted as normal to the regular content width.
How can this happen without ending wrapper and container, creating the full width div, then making a new set of wrapper/container divs? As w3 validator states to me I should have these particular div's more than once.
Im not sure exactly what you want without examples, but you may want to try something like this:
<style>
#width980{width:980px;height:200px;margin:0 auto;background:#aaa;}
#fullwidth{height:100px;background:#000;position:absolute;left:0;top:50px;right:0;color:#fff;}
</style>
<div id="width980">
width980
<div id="fullwidth">
fullwidth
</div>
</div>
Here, I made you a fiddle: http://jsfiddle.net/Wde8W/
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 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.