I have two divs side by side in a control (RadRotator).
<div class="title_link_Wrapper">
<div class="title">
<span><%# System.Web.HttpUtility.HtmlEncode(XPath("title").ToString())%></span>
</div>
<div class="link">
<span>Link</span>
</div>
</div>
.title_link_Wrapper {
width:550px;
}
.title{
width: 80%;
float: left;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
}
.link {
margin-top:6px;
}
It is working in JsFiddle
But is not working in the control:
Any hint?
You can use display:table;(parent div) and display:table-cell;(children div) which gives the same output and works most of the times:
CSS
.title_link_Wrapper {
width:550px;
display:table;
}
.title{
display:table-cell;
width: 100%;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
}
.link {
display:table-cell;
min-width:60px;
margin-top:6px;
}
Demo Fiddle
Seems like you forgot add float:left; to the div with class link.
i think you need this :
<div class="title_link_Wrapper">
<div class="title">LeftLeft
<span class="link">right</span>
</div>
</div>
css
.title_link_Wrapper {
width:550px;
}
.title{
width: 80%;
float: left;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
}
.link {
margin-top:6px;
float:right;
}
DEMO
Div by default is Display: Block, which causes an element to be alone on that line.
you will want to force your divs to be Display: Inline
.title{
width: 80%;
float: left;
font-style:italic;
margin-left:6px;
font-weight:bold;
margin-top:6px;
display: inline; /* add this */
}
.link {
margin-top:6px;
display: inline; /* add this */
float: right; /* add this */
}
you may even want to wrap them in a div set to block.
Another thing that may happen is there is no specific width on .link, so if that gets wider than 20% you will spill over into the next row again, since you .title is set to 80%
Related
How can i align the two different sizes lines one by one horizontally with no space between them?
Like
See here i want no space between the lines means the APP downloads exactly after 5M
I tried with the following:
.text
{
color:white;
}
.big
{
font-size:5em;
}
.small
{
font-size:2em;
display:inline-block;
}
<div class="text">
<span class="big">52M</span>
<span class="small">App Downloads</span>
</div>
Maybe you could use 'flex-box' and change the 'line-height' value of the span elements. It's a possible solution.
Example
.text
{
width:20%;
height:20%;
padding:5%;
background:red;
color:white;
display:flex;
flex-direction:column;
}
.big
{
font-size:5em;
line-height:0.8em;
margin:auto;
}
.small
{
font-size:2em;
margin:auto;
}
Try white-space: nowrap
<style>
.text
{
color:white;
white-space: nowrap;
}
.big
{
font-size:5em;
}
.small
{
font-size:2em;
display:inline-block;
}
</style>
With text-align: center.
Try this: http://codepen.io/r3npi2/pen/vKmgZG
.text
{
color:white;
background-color:red;
display:inline-block;
text-align:center;
}
.big
{
font-size:5em;
display:block;
}
.small
{
font-size:2em;
display:block;
}
I'm assuming you want them to be underneath each other... the question isn't very clear regarding that.
All you have to do here is change the span elements to block elements, either by CSS or - the reason I'd prefer for simplicity - changing them to divs. Then, give the surrounding div a text-align:center (and a background-color to see the result), and you're done!
.text {
background-color: #d00;
color: white;
text-align: center;
}
.big {
font-size:5em;
}
.small {
font-size:2em;
}
<div class="text">
<div class="big">52M</div>
<div class="small">App Downloads</div>
</div>
You can do it using display:block and float left:
.text {
color:white;
background-color: red;
float: left;
width: 300px;
text-align:center;
}
span {
display: block;
width:100%;
float:left;
margin: 0px;
}
Try adding a break in between them to space them out like so.
<style>
.text
{
color:white;
}
.big
{
font-size:5em;
}
.small
{
font-size:2em;
display:inline-block;
}
</style>
<div class="text">
<span class="big">52M</span>
<br>
<br>
<span class="small">App Downloads</span>
</div>
I am having an issue with my header on my website.
When I try to float the logo to the left, and float the nav to the right at the same time, it pushes all the content down and the 'header' joins the 'section' tag.
This is the JSFiddle if you would like to play around with it, any help would be greatly appreciated. Thank you.
https://jsfiddle.net/wh7wdpmu/
#logo {
width: 125px;
margin-top: 10px;
display: inline-block;
}
nav {
display: inline-block;
}
(Above is the CSS for the logo and nav so far)
I assume you want the logo to the far left and the menu to the far right?
If so you can try this: Demo
I added the floats left and right for the logo and nav respectively. I then added width: 100% to your header as well as an inline-block display property. Remove the excessive img margin to the logo (or add it to the header instead).
body {
background-image:url("http://i300.photobucket.com/albums/nn18/ojijimanuel/LONDONWALLPAPERBLUR_zpstm3nxnwu.jpg");
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
margin-left:100px;
margin-right:100px;
}
#logo {
width:125px;
display:inline-block;
float: left;
}
header {
display: inline-block;
width: 100%;
font-size: 0;
}
section h1 {
color:white;
font-family:arial;
font-weight:bold;
font-size:50px;
}
section {
text-align:center;
margin-top:300px;
}
#learnmore {
border:none;
background-color:#191919;
padding-left:30px;
padding-right:30px;
padding-top:15px;
padding-bottom:15px;
color:white;
float:left;
opacity:0.5;
margin-top:100px;
}
#learnmore:hover {
opacity:1.0;
cursor:pointer;
}
#learnmore a {
text-decoration:none;
color:white;
}
p {
color:white;
font-family:arial;
}
nav {
display:inline-block;
float: right;
}
nav a {
text-decoration:none;
color:#cccccc;
font-family:arial;
padding-right:20px;
font-size:15px;
}
nav a:hover {
color:white;
}
Also, you have an extra <nav> tag in your HTML.
You need to clear the float on your header. Try applying overflow: hidden; on your header.
Updated fiddle
(You also had an extra nav tag in there)
I have a post header div with height of 70px/4.375em
In it is a category h2 and a p timestamp
I want it to be aligned as demonstrated in this picture
(made in Photoshop)
Here is my HTML:
<div class="post-header" style="background-color:#9377d8">
<h2 class="category">Technology</h2>
<p class="timestamp">Saturday, today</p>
</div>
And my CSS:
.post-header{
height:4.375em;
width:25em;
margin-bottom:0;
float:left;
}
.category{
color:white;
display:inline;
float:left;
margin:0.625em;
}
.timestamp{
color:white;
display:inline;
float:right;
margin:0.625em;
}
Please help me with the CSS to get the design that I want
You can change your CSS as follows:
.post-header {
height:4.375em;
width:25em;
margin-bottom:0;
display:block;
}
.category {
color:white;
display:inline-block;
width:45%;
margin:0.625em;
}
.timestamp {
color:white;
display:inline-block;
text-align:right;
margin:0.625em;
width:40%;
}
This way, you get better control over your layout since you can specify both the width and the vertical align of the element. As we're at it, I'd use percentages for margins, but of course it goes on you
Visit fiddle to see it in action
You could try the following. Instead of floats, use inline-blocks with text-align: justify.
This only works if there at least two lines of text, so generate an extra blank line with the pseudo-element .post-header:after.
.post-header {
height: 4.375em;
width: 25em;
margin-bottom: 0;
float: left;
text-align: justify;
}
.category {
color: white;
margin: 0.625em;
display: inline-block;
}
.timestamp {
color: white;
margin: 0.625em;
display: inline-block;
text-align: right;
}
.post-header:after {
content: "";
display: inline-block;
width: 100%;
}
<div class="post-header" style="background-color:#9377d8">
<h2 class="category">Technology</h2>
<p class="timestamp">Saturday, today</p>
</div>
I have like this little box with text inside, but it is stuck in the top, I have tried using Vertical Align it did not help, here is the code:
.Letters
{
font-size:24px;
color: white;
font-family:Futura, Arial, San-serif;
height:40px;
width: 40px;
margin:2px;
position:relative;
top:5px;
background-color:#3594F0;
text-align: center;
float: left;
display: inline;
vertical-align:middle;
}
jsfiddle link:
http://jsfiddle.net/2Hq3s/
I need the text to be in the absolute middle without enlarging the text.
Add to .Letters
line-height:40px; /* Same value as your 'height' */
vertical-align:middle;
DEMO
Use display: table, table-cell, like here: http://jsfiddle.net/maximgladkov/MALAj/
HTML
<p class="Letters">
<span>aasdfasd<br/>asdfasdfasdf</span>
</p>
CSS
.Letters
{
font-size:24px;
color: white;
font-family:Futura, Arial, San-serif;
height:400px;
width: 400px;
margin:2px;
position:relative;
top:5px;
background-color:#3594F0;
text-align: center;
float: left;
display: table;
}
.Letters span {
display: table-cell;
vertical-align: middle;
}
Use absolute positioning
top:50%;
bottom:50%;
position:absolute;
http://jsfiddle.net/2Hq3s/3/
Use display:table-cell on parent to use vertical align property
Here is a fiddle
<div class="parent">
<p class="Letters">a</p>
</div>
.parent{
background-color:#3594F0;
display:table-cell;
}
I have next HTML code, I want to put copyright span to the center of footer but I am can just put them to the top center. What I need to change in my CSS ?
<div class="main">
<div class="footer">
<span class="copyright">some text block</span>
</div>
</div>
and next CSS
.main { width: 100%; height:1563px; background:url(../images/1.jpg) 50% 0 no-repeat ; overflow:hidden; position:relative;min-height:100%; }
.footer {position:absolute; bottom:0; width:100%; text-align:center; height:60px; background-color: #CDCBB8}
.copyright { font-family:"Myriad Pro", sans-serif; font-size:14px; color:#999; display: inline-block; vertical-align: middle; line-height: normal; }
set line-height:60px for copyright:
jsFiddle
.copyright {
font-family:"Myriad Pro", sans-serif;
font-size:14px; color:#999;
display: inline-block;
vertical-align: middle;
line-height: 60px; /* as the height of container */
}
or set line-height:60px to the continer like this:
.footer {
position:absolute;
bottom:0; width:100%;
text-align:center;
height:60px;
line-height:60px; /* as the height */
background-color: #CDCBB8
}
note: if you have more than one line in your copyright it is better that you set line-height:60px to the container and set line-height:1; to the copyright.
DEMO
Check it on http://jsfiddle.net/dfW66/
.main {
width: 100%;
height:1563px;
background:url(../images/1.jpg) 50% 0 no-repeat;
overflow:hidden;
position:relative;
min-height:100%;
}
.footer {
position:absolute;
bottom:0;
width:100%;
text-align:center;
height:60px;
background-color: #CDCBB8
}
.copyright {
font-family:"Myriad Pro", sans-serif;
font-size:14px;
color:#999;
line-height: 60px;
}
Set line-height to 60px.
vertical-align:middle can put into action by changing display properties of .footer and .copyright to table and table-cell, like this:
.footer{
display:table;
}
.copyright{
display:table-cell;
}
Then your vertical-align:middle will move the copyright text to vertically middle.
Write:
.footer{display:table;}
.copyright{display:table-cell;}
Fiddle here.
If it's just the text you want to center you can do:
text-align: center;
If you want to center the whole div give it a width and call
margin: 0 auto;
on it.