In case of 2 divs. one is static and other is dynamic. That is one div width should be 400px (This one I call as static div as it has static width) and the other div should occupy the rest width (This one I call as dynamic div as it has dynamic width). And, the dynamic div has no fixed width and should occupy all the remaining and should float right where as static div floats on left. My main issue is while stretching the browser when the website is active, there comes the major issue. I neither want the divs to overlap or go down. I want the dynamic div's width to adjust such that the menus remain constant.
My example code:
<style type="text/css">
body{
margin:0px;
}
#wrap{
width:100%;
min-width:1000px;
}
#static{
width:400px;
float:left;
background-color:#930; /* Just to differentiate DIV */
}
#dynamic{
float:right;
background-color:#CF0; /* Just to differentiate DIV */
}
.menus{
display:inline-block;
padding-left:5px;
padding-right:5px;
width:80px;
}
</style>
<div id="wrap">
<div id="static">
Logo comes here
</div>
<div id="dynamic">
<div class="menus">
Menu1
</div>
<div class="menus">
Menu1
</div>
<div class="menus">
Menu1
</div>
<div class="menus">
Menu1
</div>
<div class="menus">
Menu1
</div>
<div class="menus">
Menu1
</div>
</div>
</div>
In the above code, menus are displayed pretty far from logo whereas I need them to be just besides logo (but shouldn't be float left.) And, the width of the dynamic div should be adjusted such that they are displayed without wasting space.
If this is out of CSS then anybody please suggest me with JS/jQuery code.
Any help is highly appreciated.
Just remove float:right from #dynamic:
JS Bin demo
To evenly distribute the menu items, do this:
#dynamic
{
background-color:#CF0; /* Just to differentiate DIV */
display:table;
width: 100%;
}
.menus
{
display:table-cell;
text-align:center;
}
JS Bin demo: http://jsbin.com/emulux/2
A third installment...
Set a percentage width on the static div like 20% and set 80% to the dynamic div:
#static
{
float:left;
background-color:#930; /* Just to differentiate DIV */
width: 20%;
}
#dynamic
{
background-color:#CF0; /* Just to differentiate DIV */
display:table;
width: 80%;
}
.menus
{
display:table-cell;
text-align:center;
}
JS Bin demo
THis should do the trick..
DEMO
#static{
width:400px;
float:left;
background-color:#930; /* Just to differentiate DIV */
display:inline; /*New Line */
}
#dynamic{
/* float:right;*/
background-color:#CF0; /* Just to differentiate DIV */
width:100%;
}
Related
I have two divs, .left and .right in a .container div All of which widths are set in % and when I resize my browser the blocks resize too but the text <p> doesn't. Why is that?
Here's a link http://jsfiddle.net/TomasRR/WuNL3/10/
I have stated that .left and .right should always be 400px width when container gets 800px with this command
#media only screen and (max-width: 800px) {
.left, .right {
width: 400px;
}
however when resizing from browser's max width till 800px I want my text in .right resize too, I mean drop down on another line, so I could see the full sentence.
<div class="cont">
<div class="left">
<h1>Programming and fuss</h1>
<h2><em>by Tomas R. </em></h2>
<p>MY TOP 3 PAGES:</p>
TWITTER
WIKIPEDIA
VICE
</div>
<div class="right">
<p>"An ounce of practice is generally worth more than a ton of theory." <span>E. F. Schumacher.</span></p>
</div>
</div> <!-- .cont -->
the .left doesn't interest me. How to fix the text in .right is my question.
Your white-space:nowrap; entry in the css for your cont class is where the problem lies. This stops your paragraph from wrapping within the div
If you want the 2 divs to sit side by side, use float:left; and float:right;
To combat the problem with the right div dropping below the left div, you need to use width: calc(50% - 4px); for each div as you have borders around the divs of 1px thickness. If you adjust the border thickness you will need to adjust the pixels subtracted.
Your white-space:nowrap; entry in the css for your cont class is where the problem lies. This stops your paragraph from wrapping within the div
If you want the 2 divs to sit side by side, use float:left; and float:right;
I'd use float:left instead and also use a container element to keep the widths as 50% and not need use calc to compensate for the borders
<!-- HTML -->
<div class="left">
<div class="container">
Foo
</div>
</div>
<div class="right">
<div class="container">
Foo
</div>
</div>
/* CSS */
.cont {
width:100%;
}
.right .container { border:1px solid black; }
.right {
width:50%;
height:200px;
float:left;
}
.left .container { border:1px solid red; }
.left {
width:50%;
height:200px;
float:left;
vertical-align:top;
}
Demo
If you want them to always take up half of the width, you just have to remove the media query that you have that sets a set width when the browser is small
Demo
As a front end designer, I would recommend that at some point you use media queries to have the sections on top of each other when the screen is small so that it is responsive and readable on small screens, like this
I want a footer to stay at the bottom of the page. So I created a DIV with min-heigt:100% and a DIV with no height setting for animating an ajax content loads:
HTML:
<div class="main">
<div class="header navi>…</div>
<div class="animater">
<!-- content goes here -->
<div class="footer">
<!-- footer stuff goes here -->
</div>
</div>
</div>
CSS:
.main {
min-height:100%;
margin-left:auto;
margin-right:auto;
position:relative;
}
.header {
// height, width, margin, position
}
.animater {
// empty
}
.footer {
bottom:0px;
position:absolute;
}
When I load the page and the content is much smaller than my screen everything works perfect. The Footer is at the bottom of the screen as supposed.
I'm now animating the animater using CSS keyframes. When the out animation ends, I'm replacing the content of animater and enimate it back in again. When the content is smaller then the screen again, the footer is at the top of my animater. But when I'm reloading the page "manually" (so that the content does not get animated), the footer is positioned properly.
So I need a footer that sits at the bottom of the content whatever height the content has. I cannot give the animater min-height 'cause it is not at the top of the page.
This example I made shows the minimum css needed to get a footer to stay down. http://jsfiddle.net/meBv3/
The HTML
<div class="wrapper">
<div class="page">
page here
</div>
<div class="footer">
Content for class "footer" Goes Here
</div>
</div>
the CSS
/* THIS IS THE MIN STYLE NEEDED TO GET THE FOOTER TO STAY DOWN */
html, body{
height:100%; /* to keep .footer on bottom */
margin:0; /* to get rid of scroll bar, because (100% + default margin = scroll) */
}
.wrapper {
min-height: 100%; /* to keep .footer on bottom */
position: relative; /* must be relative or .footer will cover content */
}
.page {
padding-bottom:2.2em; /* MUST have padding on the bottom => .footer, or .footer will cover content 8*/
}
.footer {
position: absolute; /* to keep .footer on bottom */
bottom: 0px; /* to keep .footer on bottom */
height:2em; /* height must be smaller then .page's bottom padding */
}
I'm using bootstrap without any modification. The layout is pretty simple. I've a top navbar. Then the main container. And in the end, I've a footer. Something like:
<head>
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
background-color: #ECECEC;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
// navbar elements
</div> <!-- end of class navbar -->
<div class="container">
// fluid-row class with two column structure
</div> <!-- end of class container -->
<div class="footer">
<div class="container"> <!-- using container to left-align footer to the main content -->
// some content
</div> <!-- end of class footer -->
</body>
There are two things that am not able to do.
1) Whenever there's less content in the main container class, I need the footer to be aligned at the bottom of the screen. I tried min-height:100% but am doing something wrong.
2) I need the footer to have a different background color and footer should occupy the rest of the screen once the main container ends. The footer can have a minimum height or take the height as per the content inside the footer.
.footer {
height:80px;
margin-top:-80px;
position:relative;
clear:both;
padding-top:20px;
background-color:#F4F4F4;
border-top:1px solid #ddd;
clear:both;
}
What's going on here?
JSfiddle: http://jsfiddle.net/m7dkt/13/
This should do the trick for you: http://jsfiddle.net/panchroma/ru2BD/
Instead of trying to figure out how to color the footer and have it extend to the bottom of the page, set the body color as what you need for the footer colour, then colour the content area between the header and the footer.
body {
background-color: #F4F4F4; /*same as footer color */
}
/* don't need to explicitly set footer colour now, it's set above */
/* .footer {
background-color:#F4F4F4;
} */
/* wrap page content and set the background colour */
#wrapper{
padding-top:10px;
background-color:#ECECEC;
}
Update
If I understand you correctly you also want the footer text to be aligned to the bottom of the window. See how this looks:
http://jsfiddle.net/panchroma/D7YXP/
It's a combination of the technique above with a sticky footer.
I used this trick: I hope it will be useful for you.
HTML
<div id="wrap">
<div id="clearfooter"></div>
</div>
<div id="footer">
</div>
CSS
#clearfooter {
display: block;
height: 50px;
}
#wrap{
padding-bottom:69px;
overflow:hidden;
}
#footer{
width:100%;
height:69px;
background:#8dc63f;
overflow:hidden;
clear:both;
color:#FFF;
position:fixed;
bottom:0;
opacity:0.9;
}
Try adding the css below to your css:
html, body, #wrapper{
height:100%;
}
I have this HTML and css, I need to make them float next to each other and the right div should auto resized when the left div's with changes and the height of all should open fully on screen, how can I do that please help:
CSS:
.ne-divadmincontent
{
top: 15px;
width: 100%;
height:100%;
}
.ne-leftcontent
{
float:left;
}
.ne-rightcontent
{
float:left;
border-left:dotted 1px #CCC;
}
HTML:
<div class="divadmincontent">
<div class="ne-leftcontent">
l-content
</div>
<div class="ne-rightcontent">
r-content
</div>
</div>
If you don't specify the width of your two inner div tags (ne-leftcontent, ne-rightcontent) they will automatically receive the width of their parent div (divadmincontent)
Therefore a solution for your problem would be to assign some value to your inner div tags
.ne-leftcontent{
width:40% // 560px
float:left;
}
.ne-rightcontent{
width:60% // 400px
float:left;
}
This is probably a very dummy question, don't throw your shoes at me :)
Consider having HTML like this:
<div class="container">
<div class="header">
</div>
<div class="body">
</div>
<div class="footer">
</div>
</div>
I want 'header' and 'footer' to be anchored to the parent's top and bottom respectively, and 'body' to grow easily to fit all available space.
What would the CSS look like to achieve this?
EDIT: Maybe I'm saying this wrong (i'm not exactly a web developer :) ), but what I need is to have some part of a div always attached to its bottom. So when div grows this part (which might have a fixed size) would go lower with the div's lower end. But all this doesn't mean attaching a div to the bottom of browser's window.
If I understand your question correctly, you require some really basic css.
body { background: black; }
.container { width: 960px; }
.header { height: 100px; background: #ddd; }
.content { padding: 10px; }
.footer { height: 100px; background: #ddd; }
Your div's are not floated, so will stack on top of each other like pancakes.
If you want the footer to be "sticky", see here for a solution...
http://ryanfait.com/sticky-footer/
Here you go:
Example page - footer sticks to bottom
this will have the content right
between the footer and the header.
no overlapping.
HTML
<header>HEADER</header>
<article>
<p>some content here (might be very long)</p>
</article>
<footer>FOOTER</footer>
CSS
html{ height:100%; }
body{ min-height:100%; padding:0; margin:0; position:relative; }
body:after{
content:'';
display:block;
height:100px; // compensate Footer's height
}
header{ height:50px; }
footer{
position:absolute;
bottom:0;
width:100%;
height:100px; // height of your Footer (unfortunately it must be defined)
}
Try this: Set position: relative on the parent div. Set position: absolute on the inner div(s) and set both the top and the bottom properties; don't set height. The inner div(s) should stretch vertically with the parent, as required. (Doesn't work in IE6 and below unfortunately).