So, I tried to create 2 floating divs inside a parent div whose position is set to fixed and the 2 children floats to left and right. But for some reson the code is not working as expected. Here is my fiddle: http://jsfiddle.net/adityasingh773/cqn73m0p/
What I tried to achieve is make these 2 children divs float according to their CSS property i.e. to the left and right. I don't like to assign width to each child elements as it will make the code non-responsive.
Here is what I tried
HTML
<div class="container">
<nav class="top-nav">
<section>
<div class="left">left</div>
<div class="right">right</div>
</section>
</nav>
</div>
And CSS
body{
margin: 0;
padding: 0;
}
.container{
width: 80%;
margin: 0 auto;
}
nav.top-nav{
position: fixed;
top: 0;
display: block;
}
.left{
position: relative;
float: left;
}
.right{
position: relative;
float: right;
}
Your .topnav does not have width. In regards to the fixed nav not confining itself to the container, Fixed position but relative to container will probably help you.
body {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: 0 auto;
}
nav.top-nav {
position: fixed;
top: 0;
left: 0; //added so right is visible
display: block;
width: 100%;
}
.left {
position: relative;
float: left;
}
.right {
position: relative;
float: right;
}
<body>
<div class="container">
<nav class="top-nav">
<section>
<div class="left">left</div>
<div class="right">right</div>
</section>
</nav>
</div>
</body>
Related
I have created two div one is with class name .main and the second one is .container.
* {
margin: 0;
padding: 0;
}
.main {
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
position: absolute;
left: 5%;
right: 5%;
top: 25%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
When I am resizing the browser windows vertically the div with the class .container is changing its position. I want it to below the main div.
If you want your div positioned below the .main div (i.e. relative to the .main div), then you should refrain from using absolute positioning and use relative positioning instead. You can also not define a position property - by default it will be set to static, which also works:
* {
margin: 0;
padding: 0;
}
.main {
position: relative;
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
left: 5%;
right: 5%;
top: 100%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
By default, the .main will be below .container. And position: absolute will remove the element completely out of the document flow.
* {
margin: 0;
padding: 0;
}
.main {
background-color: #cfeeec;
width: 100%;
height: 60px;
}
.container {
background-color: aqua;
display: block;
margin: 0 5%;
}
<div class="main">
</div>
<div class="container">
<h1>hello</h1>
</div>
Try this.
I have simething like this:
<div class="container">
<div class="left">
(an image)
</div>
<div class="right">
(some divs and other text)
</div>
</div>
and I want toalign the 2 divs side by side
.container {
width: 100%;
}
.left, .right {
float: left;
width: 50%;
}
What do I need to do, because this doesn't work
No have problem with your code... Divs are aligned side by side...
.container {
width: 100%;
}
.left,
.right {
float: left;
width: 50%;
border: 1px solid red;
box-sizing: border-box;
}
<div class="container">
<div class="left">
(an image)
</div>
<div class="right">
(some divs and other text)
</div>
</div>
If you want to do full-height divs with half screen spreading. this will work.
.Left {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50%;
background-color:black;
}
.Right {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
right: 0;
background-color:blue;
}
Here's an working Example.
maybe you have given padding, margin, border to child div
it should work
try this
decrease some width of child div
50% to 49% like this or
.container {
width: 100%;
margin:0;
padding:0;
border:0;
}
.left, .right {
float: left;
width: 50%;
margin:0;
padding:0;
border:0;
}
I can not change HTML that's given below, only CSS can be changed.
Also "mcontainer" has variable height.
HTML IS:
<div id="contentcontainer">
<div id="sidebar" class="sidebar"></div>
<div id="mcontainer" class="container"></div>
</div>
#contentcontainer {
position: absolute;
width: 100%;
}
#mcontainer { /*To make it appear on the top*/
clear: both;
height: auto;
margin-top: 0;
padding-right: 0;
position: fixed;
width: 100% !important;
}
#sidebar {
float: left;
position: relative;
width: 100% !important;
}
mcontainer completely overlaps sidebar
I want that sidebar should be displayed below mcontainer
How is it possible?
You have seriously learnt a lot of positioning I guess. It's a total mess.
Basically here's what you want:
HTML:
<div id="contentcontainer">
<div id="sidebar" class="sidebar">2</div>
<div id="mcontainer" class="container">3</div>
</div>
CSS:
#contentcontainer {
position: relative;
background:#ddd;
}
#mcontainer { /*To make it appear on the top*/
position: absolute;
top:0;
}
#sidebar {
position: absolute;
top:30px;
}
I feel like this should be much easier than I am making it...I'm looking for a solution to have 1 solid color extend from the left and end at a logo, then have a second solid color extend all the way to the right. I want the wrapper divs to extend 100%. So something like:
<div id="header-wrap"><!--100% page width-->
<div id="header"><!--1000px centered fixed width-->
<div id="logo"></div><!-- align left-->
<div id="nav"></div><!-- align right-->
</div>
<div id="sub-header-wrap">
...
</div>
</div>
Here's an image showing what I mean:
There is a lot that goes into this.
Let me start of with a link to a working fiddle: JSFiddle
How can I explain this?
Basically I have the two full-width divs that have the full background color. Inside those two divs I have a div classified as .inner that has 80% of the width (which can be whatever you want) that is aligned to the center with margins.
Inside .inner I have a left div and a right div of the proper sizes to contain the logo/navigation. Inside the left divs, I have another div, .shade that will darken the left side of the header.
The .left divs are relatively positioned and the .shade divs are absolutely positioned.
CSS:
body{
margin: 0;
}
header
{
display:block;
width: 100%;
}
header .top
{
background: #00a;
text-align: center;
color: white;
}
header .inner
{
width: 80%;
margin: 0 10%;
text-align: left;
}
header .inner .logo, header .inner .left
{
display: inline-block;
width: 20%;
margin: 0;
text-align: center;
height: 100%;
padding: 10px 0px;
position: relative;
z-index: 1;
}
header .inner .right
{
display: inline-block;
width: 78%;
margin: 0;
text-align: right;
}
header li
{
display: inline-block;
list-style: none;
}
header .bottom
{
background: #ca0;
}
header .shade
{
width: 1000%;
height: 100%;
position: absolute;
top: 0px;
right: 0px;
background: rgba(0, 0, 0, .3);
z-index: -1;
}
HTML:
<header>
<div class="top" align="center">
<div class="inner">
<div class="logo">
Logo
<div class="shade"></div>
</div>
<div class="right">
<li>Nav 1</li>
<li>Nav 2</li>
</div>
</div>
</div>
<div class="bottom">
<div class="inner">
<div class="left">
Subtext
<div class="shade"></div>
</div>
<div class="right">
<li>Link</li>
</div>
</div>
</div>
</header>
Full JSFiddle
If I understand you correctly, try something like this in a separate CSS file, or within a <style> block. It's not tested though, sorry.
#header {
margin: 0 auto; /* for centering */
width: 1000px;
}
#logo {
float: left;
width: 250px; /* for example */
background-color: red; /* for example */
}
#nav {
float: right;
width: 750px; /* for example */
background-color: blue; /* for example */
}
UPDATE:
If you can afford CSS3, this post can be intresting for you as well.
So I'm working on some html/css stuff
I can't seem to get these two floating div's and the footer to be correctly sized inside the parent div.
the content div is positioned absolutely to get header and footer to show respectively.
HTML:
<div id="Content">
<div id="Header">header</div>
<div id="Container">
<div id="leftTable">
<div>left content</div>
</div>
<div id="rightTable">
<div>right content</div>
</div>
</div>
<div id="Footer">
<div>footer</div>
</div>
</div>
CSS:
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#Content {
padding: 0 15px;
height: 100%;
background-color: honeydew;
position: relative;
height: 100%;
}
#Header {
height: 60px;
background-color: aliceblue;
}
#Footer {
position: absolute;
bottom: 0;
background-color: purple;
height: 70px;
}
#Container {
background-color: green;
position: absolute;
top: 60px;
bottom: 70px;
margin-right: 15px;
}
#Container:after {
clear:both;
}
#leftTable {
float: left;
width: 50%;
height: 100%;
background-color: grey;
}
#rightTable {
float: left;
width: 50%;
background-color: blue;
}
http://jsfiddle.net/4CabB/12/
I was hoping to no position the Container div or footer div on the left and right sides and just have it take up the remaining space.
I'm a bit unclear as to what needs to be achieved, but perhaps this solves your issue: JSFiddle.
Essentially, I just needed to add
width: 100%;
to your container to allow its children to take up the space. Parent containers, when absolutely positioned, must have their widths specified.