Anybody tell me what is problem with the following code.
Left and top margins on .middle do not work.
I worked a lot but could not found any problem with the code below.
Please observe .middle class and div on which .middle is applied.
.container {
height: 48px;
width: 80%;
background-color: #999;
margin: 0 auto;
}
.left {
margin-left: 6px;
height: 40px;
background-color: red;
margin-top: 4px;
float: left;
overflow: hidden;
width: 30%;
}
.middle {
margin-left: 6px;
height: 40px;
background-color: green;
margin-top: 4px;
overflow: hidden;
width: auto;
}
.right {
margin-left: 6px;
height: 40px;
background-color: blue;
margin-top: 4px;
margin-right: 6px;
float: right;
overflow: hidden;
width: 40%;
}
.button {
float: right;
margin-right: 6px;
height: 32px;
width: 100px;
border-style: solid;
border-width: 1px;
margin-top: 4px;
border-color: #333;
}
p {
color: blue;
overflow: hidden;
width: 50%;
}
<div class="container">
<div class="right">
<button class="button">Search</button>
</div>
<div class="left"></div>
<div class="middle"></div>
</div>
This is primarily due to collapsing margins.
With regard to the top margin, in effect it is still there but it is spilling out of .container. To fix add overflow: auto; to .container to stop margin collapsing.
The second is due to .left being floated. To add the margin to the left of .middle you can either:
Use calc(30% + 12px) ((width of .left) + (margin of .left) + (margin of .middle))
Add margin-right: 6px; to .left as floated element margins do not collapse Thanks to #Alohci for this suggestion
.container {
height: 48px;
width: 80%;
background-color: #999;
margin: 0 auto;
overflow: auto;
}
.left {
margin-left: 6px;
height: 40px;
background-color: red;
margin-top: 4px;
float: left;
overflow: hidden;
width: 30%;
}
.middle {
margin-left: calc(30% + 12px);
height: 40px;
background-color: green;
margin-top: 4px;
overflow: hidden;
width: auto;
}
.right {
margin-left: 6px;
height: 40px;
background-color: blue;
margin-top: 4px;
margin-right: 6px;
float: right;
overflow: hidden;
width: 40%;
}
.button {
float: right;
margin-right: 6px;
height: 32px;
width: 100px;
border-style: solid;
border-width: 1px;
margin-top: 4px;
border-color: #333;
}
p {
color: blue;
overflow: hidden;
width: 50%;
}
<div class="container">
<div class="right">
<button class="button">Search</button>
</div>
<div class="left"></div>
<div class="middle"></div>
</div>
Seems like you haven't set a width and float for the middle div. One work around would be to add position:relative and replace margin-top and margin-left with top and left.
Fiddle: http://jsfiddle.net/rqLb7m4a/
You need to mention width, some time width auto will not work and also give float: left; property to middle div.
And you can code div's like left, midile and right
<div class="left"> </div>
<div class="middle"> </div>
<div class="right"> </div>
Just add float:left to the middle element and set the width to a value.
But here i think you want this div to take all the width that it can, right ?
I think it's time to use flexbox :
http://jsfiddle.net/w16cq27x/
.container {
height: 48px;
width: 80%;
background-color: #999;
margin: 0 auto;
display:flex;
}
Related
I am new at CSS positioning but could not understand of positioning the boxes.
<div class="box">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
.box {
width: 260px;
overflow: hidden;
background: #e2e2e2;
padding: 10px;
position:relative;
}
.first {
width: 50px;
height: 50px;
background: #BDBDBD;
float: left;
margin: 10px;
}
.second {
width: 60px;
height: 60px;
background: #889B7F;
float: left;
margin: 10px;
}
.third {
width: 70px;
height: 70px;
background: #B98F91;
float: left;
margin: 10px;
position:absolute;
top:70px;
left:30px;
}
Demo
If I do not set the .box position, third box is appearing up front.
If I set the .box position as relative, third box is appearing under box
If I set set third box position as relative, it goes right.
What is the inner div position rule?
Remove position:absolute; from .third and it will look like This
Snippet:
.box {
width: 260px;
overflow: hidden;
background: #e2e2e2;
padding: 10px;
position:relative;
}
.first {
width: 50px;
height: 50px;
background: #BDBDBD;
float: left;
margin: 10px;
}
.second {
width: 60px;
height: 60px;
background: #889B7F;
float: left;
margin: 10px;
}
.third {
width: 70px;
height: 70px;
background: #B98F91;
float: left;
margin: 10px;
top:70px;
left:30px;
}
<div class="box">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
hi just remove the third box position absolute and check it and it will be look like this then
I'm trying to set div's position like this:
but i can't set image (green box) in position.
orange box is on top
blue and lightgreen div are buttons
red frame is static distant under orange box
green box is link with image inside, covering partly blue and lightgreen buttons.
every links must stay clickable every time.
I can't centering green image and set it above orange div partly.
Example code here
<div class="header-container">
<div class="nav-container">
<div class="logo">
Click!
</div>
<div class="nav">
Click!
</div>
</div>
<div class="header-image">
<div class="image">
Click!
</div>
</div>
<div class="menu-container">
Click!
</div>
.nav-container{
width: 100%;
height: 50px;
background: orange;
}
.logo{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightblue;
float: left;
}
.nav{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightgreen;
float: right;
}
.header-image{
width: 100%;
border: 1px solid green;
position: relative;
z-index: 2;
text-align: center;
}
.image{
height: 100px;
width: 60%;
background: green;
opacity: 0.6;
}
.header-image a{
padding: 40px 0;
}
.menu-container{
width: 100%;
border: 1px red solid;
height: 40px;
margin-top: 50px;
}
I've uploaded your jsfiddle here.
Addded the following css:
.header-image {
position: absolute;
top: 40px;
left: 20%;
}
also added extra margin-top for the .menu-container
.menu-container {
margin-top: 80px; //instead of 50px
}
I've positioned it absolute because this way it will go wherever you want it based on the body relative positioning.
adding this to image should work:
margin:0 auto;
position:relatve;
z-index:66;
margin-top:-10px
http://jsfiddle.net/o3oyuzb9/2/
try this
only changed the css
body,html{margin: 10px;}
.header-container{
width: 100%;
}
a{
text-decoration:none;
color:#000;
padding: 10px 0px;
display: block;
text-align: center;
}
.nav-container{
width: 100%;
height: 50px;
background: orange;
}
.logo{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightblue;
float: left;
}
.nav{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightgreen;
float: right;
}
.header-image{
width: 100%;
border: 1px solid green;
position: relative;
z-index: 2;
text-align: center;
}
.image{
height: 100px;
width: 60%;
margin: 0 auto;
margin-top: -20px;
background: green;
opacity: 0.6;
}
.header-image a{
padding: 40px 0;
}
.menu-container{
width: 100%;
border: 1px red solid;
height: 40px;
margin-top: 50px;
}
just add this to your image class:
margin: 0 auto;
margin-top: -20px;
Sorry if this is already in the lexicon, but I couldn't find it. I have what I think is a pretty simple three column header, where I can't get the right column to align with the left two columns. It shows up below the left columns even though there is plenty of space. I have three divs that make up each column, and I am guessing the problem is in there somehow.
Here is the css I am using:
body {
background-color: #ffaa00;
}
#container {
width: 1268px;
height: 900px;
background-color: #fff;
margin: 0 auto;
}
/* header styles */
#main {
height: 110px;
width: 715px;
margin: 0 auto;
background-color: #ccc;
border-radius: 6px;
}
#frame {
height: 100px;
width: 705px;
background-color: #336699;
position: relative;
top: 5px;
left: 5px;
border-radius: 6px;
}
#content {
height: 90px;
width: 695px;
background-color: #ffc;
position: relative;
top: 5px;
left: 5px;
border-radius: 5px;
text-align: center;
vertical-align: ;
}
/* left header */
#left {
float: left;
height: 110px;
width: 268px;
margin: 0 auto;
background-color: #ccc;
border-radius: 6px;
}
#left-frame {
height: 100px;
width: 258px;
background-color: #336699;
position: relative;
top: 5px;
left: 5px;
border-radius: 6px;
}
#left-content {
height: 90px;
width: 248px;
background-color: #ffc;
position: relative;
top: 5px;
left: 5px;
border-radius: 5px;
text-align: center;
}
/* right header */
#right {
display:inline-block;
float: right;
height: 110px;
width: 268px;
background-color: #ccc;
border-radius: 6px;
}
#right-frame {
display:inline-block;
height: 100px;
width: 258px;
background-color: #336699;
position: relative;
top: 5px;
left: 5px;
border-radius: 6px;
}
#right-content {
display:inline-block;
height: 90px;
width: 248px;
background-color: #ffc;
position: relative;
top: 5px;
left: 5px;
border-radius: 5px;
}
h1 {
display: inline-block;
margin-top: 15px;
font-size: 3em;
font-family: lucida grande;
color: #336699;
}
And the html:
<body>
<div id="container">
<div id="left">
<div id="left-frame">
<div id="left-content">
<img src="images/keyboard.jpeg" style="width:248px; height:90px; border-radius:5px;"
alt="this is a picture">
</div>
</div>
</div>
<div id="main">
<div id="frame">
<div id="content">
<h1>HERE IS A HEADING!</h1>
</div>
</div>
</div>
<div id="right">
<div id="right-frame">
<div id="right-content">
</div>
</div>
</div>
</div>
Any insight is appreciated.
What you really need to do is just float the three elements left and if you want spacing between then set the left/right margins on #main. This solution keeps all items in the document flow properly.
#main {
height: 110px;
width: 715px;
margin: 0 8px; /* changed 'auto' to '8' to even up padding */
background-color: #ccc;
border-radius: 6px;
float: left; /* added float */
}
#left {
float: left;
height: 110px;
width: 268px;
margin: 0; /* removed 'auto' because it isn't necessary when floated */
background-color: #ccc;
border-radius: 6px;
}
#right {
display:inline-block;
float: right; /* no need to adjust this */
height: 110px;
width: 268px;
background-color: #ccc;
border-radius: 6px;
}
JSFiddle Demo
I have four divs on my asp.net page, div7_1(parent), div4_1 and div11_1 and div6_1 as child divs. This is the situation:
html
<div id="div7_1">
<div id="div4_1">
</div>
<div id="div11_1" runat="server">
</div>
<div id="div6_1">
</div>
</div>
css
#div4_1{display:table-cell; width:215px; min-height: 450px; top: 0px; float: left; background-color: #cc9933; text-align: center; border: 2px solid #999;}
#div6_1{display:table-cell; width: 185px; min-height: 450px; float: right; top: 0px; right: 0px; background-color: #cc9933; border: 1px solid #999;}
#div7_1{ position: relative; overflow: hidden; display: table; width: 1200px; min-height: 450px; top: 5px; left: 0px; padding-top: 0px;}
#div11_1{display:table-cell; float: left; padding-left: 5px; margin-left: 5px; width: 65%; min-height: 450px; top: 0px; left: 0px; border: 3px solid #999;}
I need to expand parent div height to height of child div with greatest height and expand the other child divs to that height. How can I do this? Probably I have some redundant lines in css, please correct me.
Thanks.
Not sure why you are floating either of the divs but just using display:table-cell on both seems to achieve your stated requirement
JSfiddle
CSS
#div7{position: relative;
overflow: hidden;
display: table;
min-height: 450px;
top: 5px;
left: 0px;
padding-top: 0px;}
#div4{display:table-cell;
width: 245px;
background-color: #cc9933;
text-align: center;
height:150px;
}
#div11{
display: table-cell;
position: relative;
padding-left: 5px;
margin-left: 5px;
width: 57%;
background-color: yellow;
}
I'm having issues with aligning some elements inside a nav bar.
Here's an example on jsfiddle: http://jsfiddle.net/flobar/b7nzR/
Here's the html:
<div id="nav">
<div id="menu">Menu</div>
<div id="logo">Logo</div>
<div id="settings">Settings</div>
</div>
Here's the css:
#nav {
height: 60px;
border: 1px solid #ccc;
}
#menu {
width: 70px;
height: 30px;
margin-top: 15px;
float: left;
background: #ccc;
}
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
}
#settings {
width: 70px;
height: 30px;
margin-top: 15px;
float: right;
background: #ccc;
}
The issue is that the far right block is being pushed down by the center block, but I'm not sure why.
Can anyone help please.
I'll explain you what's going on there, you have your first div set to float: left; which will float nicely, now your second div isn't floated either left or right so it's taking entire available horizontal space leading the third div to render below.
Demo
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
float: left;
margin-left: 120px;
}
Now am aware of the fact that you want to center align your #logo so in this case, make your #logo div position: absolute;
#nav {
height: 60px;
border: 1px solid #ccc;
position: relative; /* Be sure you use this else your div will fly out in the wild */
}
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
position: absolute; /* Takes your element out of the flow*/
left: 50%; /* 50% from the left */
margin-left: -100px; /* 1/2 of total width to ensure that it's exactly centered */
}
Demo 2
You must float also the #logo;
#logo {
float:left;
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
}
example
#nav {
height: 60px;
border: 1px solid #ccc;
display:table;
}
#menu {
width: 70px;
height: 30px;
margin-top: 15px;
float: left;
background: #ccc;
display: inline-table;
}
#logo {
width: 200px;
height: 30px;
margin: 15px auto 0 auto;
background: #ccc;
display: inline-table;
}
#settings {
width: 70px;
height: 30px;
margin-top: 15px;
float: right;
background: #ccc;
display:inline-table
}