I have create this block:
and I would have two parts in this block, like this:
here is my block:
<div id="content_sc" >
<img src='images/paypal-donate.jpg'>
</div>
and the css:
#content_sc {
top: 15px;
background: #fff;
width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}
I tried a lot of things, but without achieving what I wanted to do
Here you go:
http://jsfiddle.net/VALCw/
Just a case of floating your two elements left and putting overflow on the container really.
Related
This question already has answers here:
Create a horizontal rule with text in the middle? [duplicate]
(5 answers)
Closed 3 years ago.
There are many questions (and answers) about how to create a heading with centered text and a horizontal line either side, but what I'd like to achieve is slightly different.
I'd like to add vertical lines to the left and right end of the lines:
I have got close to what I'd like using this code:
body {
padding: 50px;
}
div.outer {
width: 100%;
height: 15px;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
text-align: center;
margin: auto;
position: relative;
}
div.outer>span {
font-size: 16px;
background-color: #FFF;
padding: 0 10px;
position: absolute;
top: -10px;
left: 47%;
}
<div class="outer">
<span>A Heading</span>
</div>
pen
Can anyone please point me in the right direction?
UPDATE
Thank you #nvioli for pointing me in the right direction. I ended up using a combination of your answer and flex based on this post
Here’s what worked for me: pen
I would suggest adding another div outside what you have there. You've done a nice job making the horizontal line and centering the text (which is the hard part IMO), so wrapping the whole thing in a bigger div (twice as tall) and moving the inner div down half the height seems to work.
Note I've renamed your outer div to inner and added a new outer.
body {
padding: 50px;
}
div.outer {
border-right: 1px solid black;
border-left: 1px solid black;
height:30px;
}
div.inner {
width: 100%;
height: 15px;
border-top: 1px solid black;
text-align: center;
margin: auto;
position: relative;
top:15px;
}
div.inner > span {
font-size: 16px;
background-color: #FFF;
padding: 0 10px;
position: absolute;
top: -10px;
left: 47%;
}
<div class="outer">
<div class="inner">
<span>A Heading</span>
</div>
</div>
i try to set two div boxes side by side and a third div box under these two with the length of both of them.
atm i have this code:
<div id=\"recordCard\">
</div>
<div id=\"myAnswer\">
</div>
<div id=\"cardButtons\">
</div>
css code:
#recordCard {
float: left;
padding: 10px;
margin-right: 10px;
width: 450px;
min-height: 250px;
background: #eee;
border: 4px solid white;
box-shadow: 0 0 1px rgba(0,0,0, .4);
}
#myAnswer {
float: right;
padding: 10px;
width: 450px;
min-height: 250px;
background: #eee;
border: 4px solid white;
box-shadow: 0 0 1px rgba(0,0,0, .4);
}
#cardButtons {
display: none;
float: left;
background-color: #8cff80;
border: 1px solid #3dcf2d;
border-radius: 4px ;
margin-top: 10px;
padding: 10px;
width: 910px;
}
while the third div-box is not displayed, the two div-boxes are perfectly side by side.
But by displaying the third box, the second box jumps a bit to the right.
Can anyone help me?
thanks =)
It seems that it may be due to the fact that the two divs that are supposed to be side by side - #myAnswer and #recordCard - do not have widths that equal that of the third div. Currently the two divs in the first row only equal a total of 892px (this includes widths, padding and border dimensions). While the third div totals 930px.
#myAnswer {
float: right;
padding: 10px;
width: 450px;
min-height: 250px;
background: #eee;
border: 4px solid white;
box-shadow: 0 0 1px rgba(0,0,0, .4);
}
#recordCard {
width: 458px;
height: 190px;
}
#cardButtons {
display: none;
float: left;
background-color: #8cff80;
border: 1px solid #3dcf2d;
border-radius: 4px ;
margin-top: 10px;
padding: 10px;
width: 910px;
}
Since there is a difference of 38px in total width, you can add that to #myAnswer, or #recordCard. #myAnswer is already at 470px (with padding), so adding the width to #recordCard making it 458px will make the dimensions closer.
Or, narrow the third div as Marc suggests.
The small shift to the right is due to the width of the #cardButtons div.
The div width should be 890px, which with 10px padding will give an overall width of 910px,
which is the width of the two preceding elements.
I'm having a problem with positioning my navigation element.
CSS:
#wrapper { width: 600px; margin: 0 auto; height: 300px; background: #f9f9f9; border: 1px solid #f0f0f0; }
#navigation { margin: 0 auto; text-align: center; }
.mylink { background: #666; color: #ccc; padding: 5px 10px; display: inline-block; }
.mylink:first-child { -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; }
.mylink:last-child { -webkit-border-top-right-radius: 10px; -moz-border-radius-topright: 10px; border-top-right-radius: 10px; }
HTML:
<div id="wrapper">
<div id="navigation">
<a class="mylink">Homepage</a>
<a class="mylink">Second Page</a>
<a class="mylink">Third Page</a>
</div>
</div>
I want to remove the margins on the inline elements.
I tried a "float:left" variation too. But than I can't center the elems without a width value.
Any ideas how i can solve it?
That's a common problem with 'inline-block'. You're not dealing with a margin, but an actual space character.
This should help: http://css-tricks.com/fighting-the-space-between-inline-block-elements/
You don't have a margin, inline elements just take whitespace (spaces, tabs, newline, whatever other invisible separators might be there) into consideration, either use block display and floats or type it without whitespace, updated your fiddle http://jsfiddle.net/Rnmbx/1/
Hi I'm just wondering if anyone can help me out. I'm new enough to web design, and I'm having some problems with my CSS.
Basically I cant figure out how to correctly nest my divs/boxes without having overflow issues! I have tried using overflow: hidden; but this still hasn't worked, I've also tried floating the child elements either left or right to see if it would help but still no luck!
My css looks like this:
#customerReg {
width: 47%;
height: 480px;
float: left;
background: #FFF;
padding: 10px 10px 10px 10px;
display: inline;
margin-top: 10px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
overflow: hidden;
}
#customerInfo {
width: 95%;
height: 120px;
background: #414141;
padding: 10px;
margin-bottom: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
overflow: hidden;
}
#participantReg {
width: 47%;
height: 480px;
float: right;
background: #FFF;
padding: 10px;
margin-top: 10px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
overflow: hidden;
}
#participantInfo {
width: 95%;
height: 120px;
background: #414141;
padding: 10px;
margin-bottom: 10px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
overflow: hidden;
}
My HTML Is as follows:
<div class="contentbody" style="border:#FF0066 solid 2px;">
<div id="customerReg" style="border:#33CC00 solid 2px">
<div id="customerInfo">
<p>Customer Registration
</p>
</div>
<!-- End of customerReg --></div>
<div id="participantReg" style="border:#33CC00 solid 2px">
<div id="participantInfo">
<p>Participant Sign Up</p>
<p> </p>
</div>
<!-- End of participantReg --></div>
<!-- end .contentbody --></div>
What im aiming for is so have two rounded boxes side by side with two smaller boxes inside these boxes. I tried to post an image but it wouldnt let me! What im getting is that the two inner boxes are both spilling out on the right side of the outer boxes if that makes sense??
Can anyone tell me where im going wrong and what i can do to correct this as ive spent hours trying to find an answer and cant figure it out!
The parent div set:
overflow: hidden;
OR
#customerReg, #participantReg{
float:left;
}
.contentbody:after{
content: '.';
clear:both;
visibility: hidden;
*zoom:1;
height:0;
display:block;
}
if you set the width of the first div the boxes ar side by side:
look this fiddle
.contentbody{
width:990px;
border:#FF0066 solid 2px;
}
I have a web application and I am using the CSS display: table. I have a wrapper and this contains two columns called sbr and bdy. I've no problem getting this to look like a table BUT it seems like the contents of one table cell effect the other. I made a fiddle for this. Notice that the CCC doesn't appear at the top in the right hand cell. The position of the CCC depends on code in the left cell.
Fiddle example
Can anyone explain why this is. I would have thought each cell would be isolated from the others.
<div id="wrp">
<div id="row">
<div id="sbr">
<div class="sbr_bdy">
<h4>AAAA</h4>
</div>
</div>
<div id="bdy">CCC</div>
</div>
</div>
#wrp {
background-color: #FFFFFF;
border-radius: 5px 5px 5px 5px;
display: table;
padding: 5px;
width: 200px;
margin: 0 auto;
position: relative;
text-align: left;
top: 110px;
z-index: 3;
}
.sbr_bdy {
padding: 20px 10px;
border: 1px solid #CDCDCD;
border-radius: 5px 5px 5px 5px;
background-color: red;
}
#row { display: table-row; }
#sbr,
#bdy { display: table-cell; border: 1px solid black;}
#bdy {
vertical-align: top;
}
This will move CCC to the very top of the cell. Now you can use padding to get a little spacing :)
The current behaviour is btw how a table would behave