On this website http://science-inc.com/ (on the index.html),
what is the purpose of div#Circle?
<div id="left-section">
<h1>Science</h1>
<canvas width="1278" height="614"></canvas>
<div id="Circle"></div>
</div>
It is an empty element. It has :before and :after pseudo elements, but they don’t seem to be doing anything.
It just a blank <div> that's making no effect on the view of page because it has height 0 (because it has no content), width same as it's parent element and no other staying.so there is no mean of it.
Related
I'm trying to make the div not expand over user visibility, but when I dock multiple items in this div, it expands off screen.
Here is an example.
I know, it sounds long, but I was trying to reproduce the entire layout to find the problem.
<body>
<div class="container">
<div class="head"></div>
<div class="main">
<div class="painel"></div>
<div class="dash">
<div class="head-dash"></div>
<div class="content-dash">
<div class="email-list">
<div class="head-content"></div>
<div class="content">
<div class="item"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
https://jsfiddle.net/ricardosc12/rb2kjtfh/12/
change the variable quant -> 50 and you will see the problem
Probably its height setting to 100% ignores its adjacent element, but how can I make it take up the remaining space without expanding later.
As you can see in the example, the email-list class has expanded over content, pushing all the main ones down.
I'm looking for a solution to this using flex, but can you suggest other possibilities.
I looked around but it didn't work.
Make a div fill the height of the remaining screen space
It's not the perfect answer but will solve your problem.
change your height of content-dash to this
.content-dash{
height: calc(100vh - 140px) ;
padding: 25px;
background: #EEEEEE;
}
We will make the content-dash's height to 100vh and subtract the height of head-dash and head from it.
I want to have the ability to place a fixed span div ( span1..span12) inside a .row-fluid container.
<div class="row-fluid">
<div class="span5 red">
<div class="row">
<div class="span3 gray">
I need this to span exactly 300px, not 31% of its parent
</div>
</div>
</div>
<div class="span5 blue">
</div>
here is the working jsbin ( sadly you need to enlarge the output pane )--> http://jsbin.com/uwecuv/1/edit
The idea is that the css selector (.row-fluid span3) would take precedence in this case.
Do you guys have any ideas how I can make the 'div.span3.gray' span 300px?
The reason is that in the real scenarion it will be an absolutely positioned div, and I don't want it to inherit the parent's size ( which btw will be just a div with an input box ).
Thanks!
Bootstrap grid system is designed so that span3 means that element has width=3/12 of the container width (row or row-fluid). So if you need div with fixed width=300px(not 3/12 of container width) you need to use your own css class with width=300px. Or you can use fixed layout without responsive css.
I have a problem when hiding/showing certain elements in IE8. If an element with display:inline-block has any child (including nested children) with display:block, then any child of that element has problems when hiding/showing. The page does not redraw correctly, and other elements position do not change to reflect the newly hidden/shown elements.
The minimal markup that shows the problem is below. In the example, when you click 'Clickable element', then the three divs directly below are hidden. However, the Footer Div does not change position - a large gap is left. If you do something to force a page redraw, such as selecting all text on the page, then the footer jumps to the correct position.
Something similar happens when showing the elements. Instead of the footer div being pushed to the bottom, it is overlapped by the newly shown elements.
<div style="display:inline-block">
<div>
<!-- Any number of other HTML elements -->
<div style="display:block">
<div class = "clickable" >Clickable element.</div>
<div class = "toggleable">Hideable element 1.</div>
<div class = "toggleable">Hideable element 2.</div>
<div class = "toggleable">Hideable element 3.</div>
</div>
</div>
</div>
<div>Footer Div</div>
<script type="text/javascript">
$('.clickable').click(function(){
$('.toggleable').toggle();
});
</script>
I've been trying to break this down for a fair while now, and I'm almost certain that I've got the minimal problem down (inline-block element followed by block element, and perform a show/hide on a child element). Has anybody encountered this before - or any suggestions on how to work around this?
This should do the trick. As the answer below states, inline-block isn't supported in older browsers and shows some quirky behaviour in certain versions of IE8. I've remembered this fix from something I did a while back, but I'm sorry, I can't give you a full explanation as to why this is happening. Anyhow, add a float to your main div, and clear your footer and, fingers crossed, it should work.
<div style="display:inline-block;float:left">
<div>
<!-- Any number of other HTML elements -->
<div class="div-2" style="display:block">
<div class = "clickable" >Clickable element.</div>
<div class = "toggleable">Hideable element 1.</div>
<div class = "toggleable">Hideable element 2.</div>
<div class = "toggleable">Hideable element 3.</div>
</div>
</div>
</div>
<div style="clear:left">Footer Div</div>
Seems to be working fine in here... But note that IE8 have some problems rendering jquery, and the css property 'inline-block' is not really supported by old browser versions (ie7, doesn't work, ie8, i'm not sure). Try adding the "zoom:1;" fix to the css of your tags that have the inline-block going on. Hope that helps somehow.
I have a main container <div> which holds 4 or 5 other sub <div>s. The container has a fixed height and a fixed width. What is the best way to position the sub divs so that they are arranged in a top->down then left->right manner?
I've tried floating the sub divs but that just gives me a left->right then top->down order.
Basically I want this
[ sub div 1][sub div 3][sub div 4]
[ sub div 2][ ][sub div 5]
When I mark up the code like this:
<div id="container">
<div class="subdiv">sub div 1...</div>
<div class="subdiv">sub div 2...</div>
<div class="subdiv">sub div 3...</div>
<div class="subdiv">sub div 4...</div>
<div class="subdiv">sub div 5...</div>
</div>
Notice that the sub divs can have variable heights but fixed widths.
Thank you,
To my knowledge, there's no way to do it.
There is some CSS3 that works only on some browsers to support multi-column layout (-moz-column-width, etc...) but I don't know whether it would work with DIVs in the content. And I'm fairly certain it it's not supported in IE7
The way I'd do it would be to break up the content into 3 columns containers
<div id="container">
<div class='column'>
<div class="subdiv">sub div 1...</div>
<div class="subdiv">sub div 2...</div>
</div>
<div class='column'>
<div class="subdiv">sub div 3...</div>
<div class="subdiv">sub div 4...</div>
</div>
<div class='column'>
<div class="subdiv">sub div 5...</div>
</div>
</div>
Use this CSS on the DIVs:
display: inline-block
The only way to do this natively is to use CSS3 columns (as Damp mentioned) but there are some articles on how to achieve a similar effect with JavaScript as seen in this question. That case is actually more complicated than yours.
I'm thinking the best way to do it with JS would be to first split it evenly into column containers as Damp suggested with a best guess. This should help for those with JS disabled. Then us JS to measure heights of the subdivs and move them if the initial guess was off. Assuming you're using a server side language to generate the page, you should be able to split the columns evenly. You can probably even make a good estimation on the split by checking the length of content (assuming its text) as a heuristic for the likely height of the subdiv.
I'm using Jqtouch to design a iphone app.
As I'm using a standard header/toolbar at the top, I want to simply have it fixed there without moving. I found out how to do this by creating a div with class toolbar and setting CSS display to block and min-height to 0px with important.
However, when it starts up and every time I change pages (technically, it's making different divs display and not display(?)), it autoscrolls to the top of the div that it just changed to, and I need to scroll up to see the toolbar (the toolbar is at the very top, above the div).
How do I make it actually scroll up to the toolbar or top of the page?
Here's a simplified layout of my current code: (For body section)
<body>
<div id="toolbar" class="toolbar" style="display: block; min-height: 0px !important;">
<h1>Header</h1>
<a class="button" href="#">Button</a>
</div>
<div id="home" class="current">
<!--Content in here-->
Link to next page
</div>
<div id="next">
<!--Content in here-->
</div>
</body>
I am not entirely sure I got your question, but It sounds like you want to have an element with "fixed" position. If that's the case, you may want to try the solution I posted for this question.