I have the html layout the following way
<div id="tab-container"> <!--(position = absolute) -->
<div id="contentpane"> <!--//(position = absolute)-->
<div id="dgrid"> <!--//(position = relative)-->
<div id = "grid-header"> <!--//(position= absolute)--> </div>
<div id="grid-content"> <!--//(overflow:auto; margin-top:50px;position:absolute)--> </div>
</div>
</div>
</div>
I have problem scrolling through the grid results, when ever i scroll to a result programmatically, the grid is going out of parent div and not positioned properly. I don't see the header showing up.
I tried with different positioning of div, but not able to figure out the root cause. What could be causing this?
Related
I have an issue with my CSS layout
I have a form that is contained in a 500 pixel fixed width. It is set to be centered in the page with margin auto;
Inside that div I made a table using div's. Since each div's that act as a table row have different height, I have used the overflow:hidden property. I did that to minimize the size of the form.
Inside that div I have 3 other divs that act like table data "td". They are floating inside the row.
What I am trying to achieve is to display another div on top of them all when there is an error in the form. Just like the one you see on Stackoverflow reminding you that you have code in your text that need to be set as code. The red div on the right. Now I am a bit stuck because I can't overflow that div to the sides.
So what other option do i have to set the height of the "row" div without using overflow:hidden. I dont want to use tables and the content is always changing.
Any solution is welcome.
Here is simple code so you get the picture;
<div class="row">
<div class="overflowing"></div>
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>
The overflowing div should not push the floating divs around and is not visible until I change it's property and fill it with content.
Use clearfix class with row if you are using bootstrap
<div class="row clearfix">
OR
<div class="clearfix"></div>
before end of row tag
If it is not using bootstrap
<div style="clear:both;"></div>
before end of row tag
`
<div class="float_left"></div><div class="float_left"></div> <div class="float_right"></div>
</div>`
I think it will work, and about the alternative to overflow use fixed height width thenoverflow:auto wolud be useful
I'm creating a PDF from HTML (using wicked_pdf) with multiple envelopes for printing. Each page(envelope) can have elements positioned based on the users requirements.
The trouble is getting the CSS right such that page-break-after and absolute positioned elements on each page are displayed correctly.
Here's a simplified example:
<div class="page" style="position:relative;background:red;min-height:1px;">
<div style="position:absolute;top:50px;left:0">
Address Alpha
</div>
<div style="position:absolute;top:80px;left:0">
Beta
</div>
</div>
<div style="page-break-after: always;"></div>
<div class="page" style="position:relative;background:green;min-height:1px;">
<div style="position:absolute;top:50px;left:0">
Address Gamma
</div>
<div style="position:absolute;top:80px;left:0">
Delta
</div>
</div>
This produces the following output as seen in the image:
The text "Address Alpha" should be 50px from the top of page one although it appears on page two. How can I have multiple absolute positioned blocks on each page?
For the class page you are giving only min-height.I suggest to give fixed height and width so that div with class page wont overlap.I think it will solve your problem.
I'm getting mad with my css.. I want to get the following Structure
<div class="taskbar">
<div class="startbutton">
Text
</div>
<div class="tasks">
<div class="task">task 1</div>
<div class="task">task 2</div>
<div class="task">task 3</div>
...
</div>
<div>
Where the following criterias meet:
-taskbar should pe placed on the screen bottom (position:absolute?)
-startbutton should be left (width dynamic to content text)
-tasks should take the rest of the window width
-task should have a min-width and max-width... depending of window width, the width can be variable between min and max-width.
The problem with the dynamic task width is no problem. i will solve that with jquery on resize event... But the rest is getting me mad!!!
I'm not posting any css content to not leed into you into my wrong direction :-(
Thanks for reply...
Update: Here is my jsfiddle http://jsfiddle.net/XjYVD/1/
I read somewhere (on Stack Overflow as a matter of fact!) that it's a bad idea to use tables to layout pages in html.
I have an HTML page that needs to be "divided" down the middle with some content going on the left and some content going on the right. At fist I would have thought to use nested tables with each of their widths being 50%. Can I do the same thing using div? Or some other html construct?
<div style="float:left; width:50%;">
Left <!-- Set Div As your requirement -->
</div>
<div style="float:left; width:50%;">
Right <!-- Set Div As your requirement -->
</div>
This should achieve (very basically) what you want.
body,html{height:100%}
div.mainLayout{float:left;width:50%}
div.clearFlt{clear:both}
<html>
<head>
</head>
<body>
<div class="mainLayout">LeftContent
<div class="clearFlt"></div>
</div>
<div class="mainLayout">LeftContent
<div class="clearFlt"></div>
</div>
</body>
</html>
One common way for a base layout is to wrap your areas into div containers. Those containers are positioned and sized using CSS.
If you'll inspect the stackoverflow page (if using firefox, right-click on any element on the sidebar on the right, and select 'Inspect Element'), you'll see that the sidebar is a div element with a float attribute. No tables on the Inspector stack at the bottom of the page!
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>