I have been having trouble getting the three divs on the bottom of my page to align themselves correctly. What I want is for them to sit side by side in a row. I have tried changing the float, clear, position, display, and margin properties for the #schedule, #sponsors, and #contact but they always want to overlap each other.
Here is the jsFiddle for it: http://jsfiddle.net/MMcMurry16/bpU8M/
<!DOCTYPE html/>
<html>
<head>
<title>Matt McMurry Racing</title>
<link rel = "stylesheet" href = "R3.css">
</head>
<div id = "container">
<div id = "main"></div>
<div id = "matt_tv"></div>
<div id = "twentyfour"></div>
<div id = "schedule" class = "bottom"></div>
<div id = "sponsors" class = "bottom"></div>
<div id = "contact" class = "bottom"></div>
</div>
</html>
#container{
margin: auto;
width: 650px;
height: 650px;
border: 1px solid black;
}
#main{
width: 415.8px;
height: 415.8px;
clear: left;
float: left;
border: 1px solid #AF0000;
box-shadow: 2px 2px 3px #696969;
margin-right: 5px;
margin-bottom: 3px;
}
#matt_tv{
width: 201px;
height: 201px;
clear: right;
float: left;
border: 1px solid #AF0000;
box-shadow: 2px 2px 3px #696969;
margin-left: 5px;
margin-bottom: 7px;
}
#twentyfour{
width: 201px;
height: 201px;
clear: right;
float: left;
border: 1px solid #AF0000;
box-shadow: 2px 2px 3px #696969;
margin-left: 5px;
margin-bottom: 5px;
margin-top: 5px;
}
#schedule{
width: 201px;
height: 201px;
clear: right;
float: right;
border: 1px solid #AF0000;
box-shadow: 2px 2px 3px #696969;
margin-left: 5px;
margin-top: 5px;
margin-right: 20px;
}
#sponsors{
width: 201px;
height: 201px;
border: 1px solid #AF0000;
box-shadow: 2px 2px 3px #696969;
margin-right: 5px;
margin-top: 5px;
margin-left: 5px;
position: relative;
}
#contact{
width: 201px;
height: 201px;
float: left;
clear: left;
border: 1px solid #AF0000;
box-shadow: 2px 2px 3px #696969;
margin-right: 5px;
margin-top: 5px;
margin-left: 0px;
}
.bottom{
display: table-row;
margin-bottom: -305px;
}
Thanks.
Well you are using invalid HTML for one, divs don't go inside anchor tags. Put the div around the anchor tag.
This isn't just a problem with overlapping, clear and float are the key here.
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse, and the resulting combined
margin is called a collapsed margin.
More info here
You can achieve what you want with this simple changes:
#sponsors {
float: left; /* add floating */
}
#schedule {
/*clear: right; remove clearing */
}
#contact {
/*clear: left; remove clearing */
}
.bottom {
/*margin-bottom: -305px; you wont gonna need this anymore*/
}
Live Demo!!!
Try this CSS:
jsFiddle example
#container {
margin: auto;
width: 650px;
height: 650px;
border: 1px solid black;
}
#main {
width: 415.8px;
height: 415.8px;
clear: left;
float: left;
border: 1px solid #AF0000;
box-shadow: 2px 2px 3px #696969;
margin-right: 5px;
margin-bottom: 3px;
}
#matt_tv {
width: 201px;
height: 201px;
clear: right;
float: left;
border: 1px solid #AF0000;
box-shadow: 2px 2px 3px #696969;
margin-left: 5px;
margin-bottom: 7px;
}
#twentyfour {
width: 201px;
height: 201px;
clear: right;
float: left;
border: 1px solid #AF0000;
box-shadow: 2px 2px 3px #696969;
margin-left: 5px;
margin-bottom: 5px;
margin-top: 5px;
}
#schedule {
width: 201px;
height: 201px;
clear: left;
border: 1px solid #AF0000;
box-shadow: 2px 2px 3px #696969;
margin-left: 5px;
margin-top: 5px;
}
#sponsors {
width: 201px;
height: 201px;
border: 1px solid #AF0000;
box-shadow: 2px 2px 3px #696969;
margin-right: 5px;
margin-top: 5px;
margin-left: 5px;
}
#contact {
width: 201px;
height: 201px;
border: 1px solid #AF0000;
box-shadow: 2px 2px 3px #696969;
margin-right: 5px;
margin-top: 5px;
margin-left: 0px;
}
.bottom {
display: inline-block;
margin-bottom: -305px;
}
I played around with the css a lot. I set the anchors to float not the divs, and I changed some of the css to make it all match
Here you go
<div id = "schedule"></div>
<div id = "sponsors" class = ""></div>
<div id = "contact" class = ""></div>
Related
How to set fit-content for width in right side. I used fit-content value for width and every things Okay in left side, but in right side content put in center of page. I use this CSS for make dynamic width by content:
.chat li.right .chat-body {
margin-right: 60px;
border: 1px solid $c-grey;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
margin-left: 20%;
max-width: 80%;
width: fit-content;
}
It's my chat example:
CodePen Example
Replace with my give code.
.chat li.left .chat-body {
margin-left: 10px;
border: 1px solid #DDDDDD;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
/* margin-right: 20%; */
max-width: 80%;
width: fit-content;
float: left;
}
.chat li.right .chat-body {
margin-right: 10px;
border: 1px solid #DDDDDD;
padding: 10px;
background-color: whitesmoke;
border-color: #e3e3e3;
/*box-shadow: 0 1px 0 #cfcfcf;*/
border-radius: 2px;
/* margin-left: 20%; */
max-width: 80%;
width: fit-content;
float: right;
}
and:
.chat li small.pull-left {
padding-left: 60px;
padding-top: 5px;
clear:both;
}
.chat li small.pull-right {
padding-right: 60px;
padding-top: 5px;
clear:both;
}
Working Demo
So what im trying to do is to make space between middle line and middle text. This is my fiddle: https://jsfiddle.net/abqy4w1f/. So i want that left and right side is 10px from circle. Any suggestion?
.outter-h2 {
width: 200px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 35px auto 35px;
}
.outter-span {
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
}
<h2 class="outter-h2"><span class="outter-span">?</span></h2>
For this particular example you ca do this:
.wrapper{
display: inline-block;
}
.outter-h2 {
float: left;
width: 100px;
text-align: center;
border-bottom: 1px solid #cccccc;
margin-top: 4%;
}
.outter-span {
float: left;
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
margin: 0 10px;
}
<div class="wrapper">
<div class="outter-h2"></div>
<span class="outter-span">?</span>
<div class="outter-h2"></div>
</div>
You can easily create a fake space using CSS box-shadow property (this is assuming the shadow color and the background color are the same)
All you have to do is add this line to .outer-span:
box-shadow:0 0 5px 20px #FFF;
This solution keeps the HTML intact.
Demo:
body {
background: #FFF;
}
.outter-h2 {
width: 200px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 35px auto 35px;
position: relative;
z-index:1;
}
.outter-span {
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
position: relative;
z-index:3;
box-shadow:0 0 5px 20px #FFF; /*add space using box-shadow*/
}
<h2 class="outter-h2"><span class="outter-span">?</span></h2>
<h2 class="outter-h2"></h2><span class="outter-span">?</span><h2 class="outter-h2"></h2>
.outter-h2 {
width: 100px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 20px auto 35px;
float:left;
}
.outter-span {
background: #fff;
padding: 0 10px;
border: 1px solid #cccccc;
border-radius: 50%;
color: #bec3c7;
margin: 10px;
float:left;
}
try this i think this is the solution you wanted. please let me know if i am correct or not
This is done(corrected) exactly what you want.
.outer-h2 {
width: 100px;
text-align: center;
border-bottom: 1px solid #cccccc;
line-height: 0.1em;
margin: 20px auto 35px;
float:left;
}
.outer-span {
background: #fff;
padding: 0px 10px;
color: #bec3c7;
margin: 10px;
float:left;
}
<h2 class="outer-h2"></h2><span class="outer-span">?</span><h2 class="outer-h2"></h2>
<h2 class="outter-h2"></h2><span class="outter-span">?</span>
<h2 class="outter-h2"></h2>
Click here for DEMO
I'm trying to get a border around a fieldset and its legend, without having the bottom part of this border on the legend.
Here's the default behavior:
fieldset {
border: 1px solid #ccc;
border-radius: 5px;
padding: 25px;
}
legend {
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px 15px;
}
<fieldset>
<legend>Legend</legend>
</fieldset>
I would like the legend to be "part of the fieldset", like this:
I tried many tricks, playing with border-bottom and box-shadow without success.
Does anyone knows a way to achieve this properly?
Thanks.
If you add an inner <span> to the legend, you can acheive this effect with a little css hackery.
fieldset {
border: 1px solid #ccc;
border-radius: 5px;
padding: 25px;
margin-top: 20px;
}
legend {
border: 1px solid #ccc;
border-bottom: 0;
border-radius: 5px 5px 0 0;
padding: 0 18px;
position:relative;
top: -10px;
}
legend span {
position:relative;
top: 8px;
}
<fieldset>
<legend><span>Legend</span></legend>
</fieldset>
If you can't add the inner span, you can get a similar effect, but it's not quite as perfect.
fieldset {
border: 1px solid #ccc;
border-radius: 5px;
padding: 25px;
margin-top: 20px;
}
legend {
border: 1px solid #ccc;
border-bottom: 0;
border-radius: 5px 5px 0 0;
padding: 8px 18px 0;
position:relative;
top: -14px;
}
<fieldset>
<legend>Legend</legend>
</fieldset>
Here is a solution idea with no added markup. Use a pseudo element with the same background color as the legend and fieldset to hide the bottom portion of the legend.
Here's a sample. Tweak as needed.
fieldset {
border: 1px solid #ccc;
border-radius: 5px;
padding: 25px;
position: relative;
margin-top: 30px;
}
legend {
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px 15px;
position: absolute;
top: -25px;
left: 20px;
background-color: #fff;
}
legend::after {
content: '';
background-color: #fff;
height: 7px;
right: -1px;
left: -1px;
bottom: -1px;
border-radius: 0 0 5px 5px;
position: absolute;
}
<fieldset>
<legend>Legend</legend>
</fieldset>
Reading all answers, I came to a satisfying solution, without any shift, nor additional markup:
fieldset {
border: 1px solid #ccc;
border-radius: 5px;
padding: 25px;
}
legend {
position: relative;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px 15px;
line-height: 18px;
}
legend:after {
content: "";
position: absolute;
bottom: -1px;
left: -1px;
right: -1px;
height: 13px;
z-index: 1;
border: 1px solid white;
border-top: none;
border-radius: 0 0 5px 5px;
}
<fieldset>
<legend>Legend</legend>
</fieldset>
I have made a 3 column widget area on Wordpress, however it appears that there is padding. Ive amended the margin, however its still not resizing the widget area to fit inside my "sidebar".
This is my site:
www.mammacoil.com
This is my CSS
#footer-widgets {
display: block;
width:950px;
margin-left:-50px;
background: #000000;
}
#footer-widget1 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #000000;
border: 1px solid #fff;
}
#footer-widget2 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #000000;
border: 1px solid #fff;
}
#footer-widget3 {
width: 260px;
float: left;
margin: 15px 10px 10px 15px;
padding: 10px;
background-color: #000000;
border: 1px solid #fff;
}
THIS IS NOW RESOLVED
You have used id footer-widget1 twice, which isn't valid HTML.
I recommend taking the id off the inner #footer-widget1 and applying a different style.
This will resolve your padding issue.
I have two divs which should looks like one figure. The problem is with the border of the circular block. See pic. below. css were added below
#nameWidgeteMain {
width: 279px;
height: 400px;
top: 0px;
position: absolute;
background-color: rgb(237,237,237);
border: 1px solid #dbe0e3;
box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
.nameWidgeteCloseArea {
position: absolute;
width: 22px;
height: 31px;
top: 7px;
left: 270px;
background-color: rgb(237,237,237);
color: white;
border: 1px solid #dbe0e3;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
text-align: center;
}
#nameWidgeteCloseTitle {
padding-top: 5px;
left: auto;
font-family: sans-serif;
font-size: 12pt;
color: rgb(158, 158, 158);
}
Maybe try something like this: http://jsfiddle.net/VNAZA/
Uses two divs: one with just the border, which gets layered under the rectangle and another with the actual content, layering over the rectangle. This way you can also apply css box-shadow to the lower div.
.container{
position:relative;
width: 50px;
height: 150px;
}
.rect{
position:absolute;
width: 50px;
height: 150px;
background: #eee;
border: 1px solid #000;
z-index: 5;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}
.round_content{
position: absolute;
top: 50px;
right: -25px;
width: 50px;
line-height: 50px;
background: #eee;
z-index: 6;
text-align:center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.round_border{
position: absolute;
top: 49px;
right: -26px;
width: 52px;
height: 50px;
line-height: 52px;
border: 1px solid #000;
z-index: 4;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 10px 2px #cccccc;
box-shadow: 2px 2px 10px 2px #cccccc;
}
<div class="container">
<div class="rect"></div>
<div class="round_content">x</div>
<div class="round_border"></div>
</div>
This is not possible with CSS.
Solution A) involves graphics used as background and solution B) uses a layer behind the vertical bar to draw the oval, a second layer for the bar itself and a third DIV for the X and it's link.
Use z-index property.
#nameWidgeteMain, #nameWidgeteMain2 {
width: 279px;
height: 400px;
top: 0px;
position: absolute;
background-color: rgb(237,237,237);
box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
#nameWidgeteMain2 {
z-index: -2;
border: 1px solid #dbe0e3;
}
.nameWidgeteCloseArea {
z-index: -1;
...
}
This is not merging but the result is the same.