I want to div css for make a div on which name of div is display on top right side border. Like: -----------DEMO--------------------------------------
I think you need like following:
HTML:
<div class="test">
<span>Your text </span>
</div>
CSS:
.test {
border: 1px solid #000000;
line-height: 0;
text-align: left;
margin-top:40px;
height:100px;
width:400px;
}
.test span {
background-color: #ffffff;
padding: 0 10px;
margin: 0 20px;
}
Check Fiddle
Related
I'm trying to center these 3 floated divs on the same line. Here is a link to jsfiddle:
https://jsfiddle.net/dtps4fw8/2/
any suggestions?
HTML:
<div class="content">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
CSS:
.box {
width: 30%;
height: 200px;
float: left;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;
}
See this fiddle
To make the 3 divs centered, first of all, remove the floatproperty and then to apply the floated effect, use display:inline-block. inline-block display gives a textual characteristics to the div. A text-align:center for the parent div would center these inline-block elements inside the parent.
Update your CSS as follows
.box {
width: 30%;
height: 200px;
display: inline-block;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;
}
.content {
text-align: center;
}
First the float:left; is not relevant in your case, just like Lal said, instead of float:left; its should be display:inline-block; and you can also add a relative positioning position:relative;
I use flexbox. Very minimal and responsive.
.content {
width:100%;
display: flex;
flex-direction:row;
flex-wrap:wrap;}
.box {
height: 200px;
flex:1;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;}
I have a footer div with inner span buttons.
Each button have margin-right: 20px and the .footer element has padding: 0 13px.
I want to prevent the margin-right of the most right button by setting negative margin-right to its parent.
How could I get it with margin-right?
.footer {
border: 2px solid blue;
padding: 0 13px;
width: 120px;
text-align: right;
background-color: yellow;
}
.btn {
border: 1px solid black;
margin-right: 20px;
background-color: red;
}
<div class="footer">
<span class="btn">Btn1</span>
<span class="btn">Btn2</span>
</div>
I am not looking for a solution with the last child CSS pseudo-class.
You need to add another container child of .footer and apply a negative margin-right to that element. This approach is also described here:
.footer {
border: 2px solid blue;
padding: 0 13px;
text-align: right;
background-color: yellow;
overflow:hidden;
}
.footer > div {
margin-right:-33px;
}
.btn {
border: 1px solid black;
margin-right: 20px;
background-color: red;
}
<div class="footer">
<div>
<span class="btn">Btn1</span>
<span class="btn">Btn2</span>
</div>
</div>
Note you also need to a d overflow:hidden; to the .footer element to prevent horizontal scrollbar.
There is probably a wide array of bad practice that I'm using, as I am a beginner when it comes to HTML and CSS, so please keep that in mind when down-voting this post into the darkest depths of the Internet. My problem is that I want to make a line of text that interrupts a horizontal border, but then I want text after it that is aligned with the original text. Here's the code that I have so far.
HTML:
<h2 style = "float:left; width:500px"><span>This is a test</span></h2>
<div id = "test">
<p>Other stuff</p>
</div>
CSS:
h2 {
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
}
#test{
border-right: 1px solid black;
width: 50px;
position: relative;
float: left;
}
I want it to look like this:
-----This is a test -------------------------------
Other Stuff|
The effect I am trying to get is basically a corner. The vertical line after "Other stuff" should link into the line coming from the "This is a test". I am having trouble aligning the text.Right now my vertical line goes above the horizontal line. My apologies again for all of the bad practice I am probably displaying, but I would really appreciate any help for this. CSS is a horrible time for me. Thanks in advance.
Wrap both inside a common position:relative; parent
and set the #test to be position:absolute top and right:
.container{ /* added */
width:500px;
position:relative; /* in order to contain absolute children */
}
h2 {
/*float:left; no need to */
/*width:500px; now container has it */
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
}
#test{
border-right: 1px solid black;
width: 50px;
/*position: relative; set to absolute! */
position:absolute;
top:2px; /* added */
right:0; /* added */
/*float: left; no need to */
}
<div class="container">
<h2><span>This is a test</span></h2>
<div id = "test">
<p>Other stuff</p>
</div>
</div>
You should take care to keep in mind the framework of your site when positioning these items, but if you enlarge the div to fit the text without wrapping and then you can use margins to position the item where you want since it is already floating. Use this css:
h2 {
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
}
#test{
border-right: 1px solid black;
width: 75px;
position: relative;
float: left;
margin-top: 12px;
margin-left: -75px;
}
I'm writing a website and I have some problems with margin.
I have a following HTML code:
<div id="mainBody">
<div class="subTitle" id="backgroundTitle" >
<h3>
Background
</h3>
</div>
</div>
my CSS code is the following:
#mainBody{
height:200px;
width: 500px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
.subTitle {
margin-top=0px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
h3 {
margin-top:100px;
margin-bottom:0px;
}
the result I'm expecting is that the "mainBody" div has 0px top margin while the h3 inside has 100px top margin. However, what I got instead is that the "mainBody" div shifts down with h3 together, meaning that they both have a top-margin of 100px with respect to the top of the page.
Does anyone know why this happens?
Thanks a lot!
Add display:inline-block; to h3 element class.
h3 {
margin-top:100px;
margin-bottom:0px;
display:inline-block;
}
Js Fiddle Demo
I don't see any problem! See the Fiddle. I added borders to the elements to clearly see the element position.
Note:I have tested in FF 26.0, Chrome 32.0 on Ubuntu 12.04 LTS.
This is how it looks:
I added borders to see the element boundaries:
#mainBody{
...
border:1px solid red;
}
.subTitle {
...
border:1px solid green;
}
h3 {
...
border:1px solid blue;
}
During the workflow, You will need to remove collapsing, for that you probably need this http://nicolasgallagher.com/micro-clearfix-hack/
I'm not sure you really need the <h3> - you could just style the text in the subtitle.
CSS
#mainBody{
height:200px;
width: 500px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
}
.subTitle {
margin-top=0px;
width: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 70px;
border: 1px solid red;
font-size: 26px;
font-weight: bold;
text-align: center;
border-top: 6px solid red;
}
HTML
<div id="mainBody">
<div class="subTitle" id="backgroundTitle" >
Background
</div>
</div>
FIDDLE
How can I prevent the top edge from being cut off in this code: http://jsfiddle.net/ebW6F/?
HTML code:
<div id="text">
abcd efgh
</div>
CSS code:
#text {
display: inline;
border: 3px solid black;
padding: 10px;
font-size: 40px;
}
Here is one way to do that:
#text {
display: inline-block;
border: 3px solid black;
padding: 10px;
font-size: 40px;
}
Since you appear to be creating a box of some kind, use display:inline-block instead of just display:inline.
See: http://jsfiddle.net/ebW6F/2/