Here's the jsfiddle: http://jsfiddle.net/dazakip/u7d59901/
.nav {
float: left;
width: calc(100% - 75px);
height: 10px;
padding-left: 5px;
padding-bottom: 10px;
background-color: green;
}
.checkout{
float: right;
width: 75px;
height: 10px;
padding-bottom: 10px;
background-color: red;
}
Specifically this code. Want the two divs to sit next to each other, and remain regardless of resizing. The preview will show what I mean.
Thanks!
You have a padding-left of 5px, which is taken in account with the calculation. If you remove or calculate the 5px it should be fine!
.nav {
float: left;
width: calc(100% - 80px); /* add 5px */
height: 10px;
padding-left: 5px; /* or remove padding */
padding-bottom: 10px;
background-color: green;
}
.checkout{
float: right;
width: 75px;
height: 10px;
padding-bottom: 10px;
background-color: red;
}
.lol {
height:111110px;
background-color:grey;
}
<body>
<div class="nav">HOME | MENS | WOMENS</div>
<div class="checkout">Checkout</div>
<div class="lol"></div>
</body>
Related
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;
}
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'm developing a site for mobile. Users have profile pictures that should have rounded edges, similar to twitter. However, on the smaller images, only some of the corners are being affected, even though the same images look perfect at the top of the page.
My page is here:
http://porndoraone.com/finnaRoot/index.php
Thanks!
The problem is the padding-left and padding-top. They change the overall width and height of the element and where the border is, change them to margins and you'll be fine:
.userpostpics{
width:150px;
height:150px;
border-radius: 15px;
margin:10px;
float:left;
margin-left: 15px;
margin-top: 15px;
}
in your CSS change
.userpostpics {
width: 150px;
height: 150px;
border-radius: 19px;
margin: 10px;
float: left;
padding-left: 20px;
padding-top: 20px;
}
to
.userpostpics {
width: 150px;
height: 150px;
border-radius: 19px;
margin: 10px;
float: left;
margin-left: 20px;
margin-top: 20px;
}
Hope this will help you ..
.userpostpics {
width: 150px;
height: 150px;
border-radius: 15px;
margin: 10px;
float: left;
margin-left: 20px; /* Use margin- instead */
margin-top: 20px; /* of padding- */
}
You should add border raduis with 50% like here :
.userpics {
width: 190px;
height: 190px;
margin: 2px;
border-radius: 50%;
}
img.friendpics {
width: 200px;
height: 200px;
margin: 2px;
border-radius: 50%;
}
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
}
I'm trying to let a div container with a black background substitute as the border style for a bar graph that has a border radius. Here's the HTML/CSS:
HTML:
<div class="graph-outer">
<div class="inner-left-cap"></div>
<div class="inner-left-bar">40%</div>
<div class="inner-right-bar">60%</div>
<div class="inner-right-cap"></div>
</div>
CSS:
.graph-outer {
background-color: black;
height: 20px;
width: 300px;
border-radius: 10px;
padding: 1px;
}
.inner-left-cap {
background: orange;
width: 2%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
}
.inner-left-bar {
background: orange;
width: 38%;
height: 100%;
text-align: center;
float: left;
}
.inner-right-cap {
background: red;
width: 2%;
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
.inner-right-bar {
background: red;
width: 58%;
height: 100%;
text-align: center;
float: left;
}
http://jsfiddle.net/2ZkDz/115/
The issue in which I am having is that the corners don't look as if they have any black border style whatsoever. What can I do?
Use this version with overflow:hidden and a explicit border on your outer controller and no padding.
.graph-outer {
background-color: black;
height: 20px;
width: 300px;
border:1px solid black;
border-radius: 10px;
overflow:hidden;
}
.inner-left-cap {
background: orange;
width: 2%;
height: 100%;
float: left;
}
.inner-left-bar {
background: orange;
width: 38%;
height: 100%;
text-align: center;
float: left;
}
.inner-right-cap {
background: red;
width: 2%;
height: 100%;
float: left;
}
.inner-right-bar {
background: red;
width: 58%;
height: 100%;
text-align: center;
float: left;
}
http://jsfiddle.net/2ZkDz/116/
I've updated your CSS, I changed the caps to 3% each and made the bars smaller. The bar on the inside was going over the caps.
.graph-outer {
background-color: black;
height: 20px;
width: 300px;
border-radius: 10px;
padding: 1px;
}
.inner-left-cap {
background: orange;
width: 3%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
}
.inner-left-bar {
background: orange;
width: 37%;
height: 100%;
text-align: center;
float: left;
}
.inner-right-cap {
background: red;
width: 3%;
height: 100%;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
.inner-right-bar {
background: red;
width: 57%;
height: 100%;
text-align: center;
float: left;
}
http://jsfiddle.net/2ZkDz/119/
http://jsfiddle.net/2ZkDz/120/
border-radius: 10px;
padding: 2px;
That should do it! I just threw on a border-radius and bumped up the padding 1. There should be an easier way using the actual border property but im feeling lazy and this does it
a solution without the end-caps (that way the bar width matches the values)
demo jsfiddle
the graph-outer is 20px tall so the nested bars are 18px (20px - 2px (1px top/bottom padding)), set the border-radius on the bars to 9px each (half of the height so each corner is uniform and matches the parents curvature)
.inner-left-bar {
background: orange;
width: 40%;
height: 100%;
text-align: center;
float: left;
border-radius:9px 0 0 9px; /* add this */
}
.inner-right-bar {
background: red;
width: 60%;
height: 100%;
text-align: center;
float: left;
border-radius:0 9px 9px 0; /* and this */
}
/* and drop the end-caps */