Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I would like for the number and the word members to be aligned.
What am I doing wrong?
Link here
Add float:left to id stat-left
Check this updated DEMO
#stat-leftgive to`
display:inline-block
as like this
#stat-left {
display:inline-block;
vertical-align:top;
}
Demo
Add style="float:left" to the div with number :)
It will allow next Divs to float object from left side :)
<div id="connections">
<div id="stat">
<div style="float:left"id="stat-left">
<p span class="number"> 2,476 </p>
</div>
<div id="stat-right">
<p> Followers </p>
</div>
</div>
</div>
You could quite easily condense your code. Rather than using a paragraph tag, why not use a span instead? Paragraph tags are automatically block level elements, but spans are inline by default.
jsfiddle.
i tried to make a code for your with only one div and minimize code
HTML
<div id="connections">
<p class="number"> 2,476 </p>
<p class="stat-right">Followers </p>
</div>
CSS
#connections {
margin: 0px;
width: 150px;
font-family: calibri;
font-size: 22;
color: #444;
border:1px solid red;
overflow:hidden;
}
.number {
margin: 0px;
padding: 0px;
float:left;
}
.stat-right {
float:right;
margin-top:7px;
}
Check the demo :- http://jsfiddle.net/EC63P/35/
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
This is the code I wrote. but it doesn't work as I expected. There is space around the background color still and I want to cover the div with that color.
What is the issue here?
#div {
background-color: black;
margin: 0;
}
This might be happening for 2 reasons :
You don't have initial values set to 0 in CSS for the entire DOM
You have some padding on a parent element,or margin on child element that you need to get rid off
Attaching a runnable snippet for your reference
*{
margin:0;
padding:0;
box-sizing:border:box
}
.main{
background:blue;
padding:1rem;
}
.child{
background:red;
padding:1rem;
}
.grandchild{
background:yellow;
padding:1rem;
}
<div class=main>
<div class="child">
<div class="grandchild">
Text
</div>
</div>
</div>
background-color is not applied on margins. Replace margin: 0; with padding: 0;
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
html code
<div class="title-content">
<div class="h1">
<h1><strong>stuff</strong></h1>
</div>
</div>
css code?
I need the css code and I want it in center of the bage while the border on under the word only and not all the line .
If you want just the title characters to be underlined and not the whole width of the title class element, then a simple text-align center will do it with the h1 display setting changed and the border set on that.
.title-content {
text-align: center;
}
.h1 {
border-bottom: 1px black solid;
display: inline-block;
}
<div class="title-content">
<div class="h1">
<h1><strong>stuff</strong></h1>
</div>
</div>
If you want more complex layout then probably investigating flex would be useful.
You could add it to the .title-content class using CSS.
.title-content {
display: flex;
justify-content: center;
}
.title-content h1 {
border-bottom: 1px solid black;
}
<div class="title-content">
<div class="h1">
<h1><strong>stuff</strong></h1>
</div>
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Would like to use something similar to this format for my own personal blog site. The source code isn't giving me many hints to how I can code up a format like this.
I was thinking of somehow using divs within each row of a table to do this, but I know there's a cleaner way to do it. Any recommendations?
What you're asking for seems quite simple. The example you've given has quite nice design choices, in terms of font, weight and color; but the actual markup doesn't need to be very complicated.
It is basically a bunch of 2 column rows, the first column of each row containing the header and date, the second containing the abstract. The following jsfiddle does that: https://jsfiddle.net/cxmgLctq/
the html:
<div class="container">
<div class="row">
<div class="left">
<h1>
test
</h1>
</div>
<div class="right">
<h2>
more information here.
</h2>
</div>
</div>
<div class="row">
<div class="left">
<h1>
test
</h1>
</div>
<div class="right">
<h2>
more information here.
</h2>
</div>
</div>
</div>
And the css:
.row {
border-bottom: 1px solid black;
border-top: 1px solid black;
width: 100%;
height: 100px;
}
.left {
float: left;
width: 200px;
}
.right {
float: left;
width: 400px;
}
.container {
width: 600px;
height: 600px;
margin: 20px
display: block;
}
Notice that I've made no real attempt to style it in any way. That styling is what makes the example you posted look nice, and the one i made look terrible. Additionally you could use plenty of libraries to achieve this or indeed a table like you suggested, but it is completely doable with nothing more than divs as well. What you should do will depend on your situation.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Now I am create a html to just duplicate the word file. And how to achieve the following outlook?This one
I use underscore to act like the field. How can I make the end of each line to be equal? One more thing to remark is that, this div should be style="padding-left: 200px;", comparing to the whole file.
Thank you.
Alex, to achieve this, you'll need to use some form of layout element. There are a couple options, but the most prevalent today is Flexbox.
To use Flexbox to achieve this, you could do something like:
HTML:
<form class="form">
<div class="row">
<label>First Field</label>
<span>
<input>
</span>
</div>
<div class="row">
<label>Second Field</label>
<span>
<input>
</span>
</div>
<div class="row">
<label>Third and Final Field</label>
<span>
<input>
</span>
</div>
</form>
CSS:
* {
box-sizing: border-box;
}
.row {
display: flex;
flex-direction: row;
}
.row span {
flex: 1;
display: block;
}
.row span input {
width: 100%;
margin-left: 5px;
border: none;
border-bottom: 1px solid #000;
background: transparent;
outline: none !important;
}
See JSFiddle
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
How can I vertically align text inside the div with the image?
Fiddle: http://jsfiddle.net/C6pf7/3/
EDIT: I cannot use display:table; or height for div1
I tried putting the image as a background in the div that's one way of sort of doing it. Although you can use
vertical-align:middle
Heres a link to question already asked previously.
Vertically align text next to an image?
Use below Code:
<div id = "div1" style='float:left;width:100%'>
<p align='left' >
<img src="http://www.loriswebs.com/html-tips/images/delphinium-close1c.jpg"
id= "img1" style='float:left;'></img>
123
</p>
</div>
Set min-height: for #div
Like
#div1{
text-align: center;
vertical-align : middle;
border: 2px solid red;
min-height:80px;
}
Use line-height:75px in your css and add a new div with style="clear:both;"
Css:
#div1{
text-align: center;
vertical-align : middle;
border: 2px solid red;
line-height: 75px; /* Add this */
}
Updated Fiddle