I am generating divs dynamically and need a solution exactly like this (no external style or css because they are ignored when generated dynamically after page load). I don't understand why the browser ignore my text-align:right. Also i want to keep h and span (no p). Normally we should see h to the left and span to the right on the same baseline:
<!DOCTYPE html>
<body>
<div style="background-color:green;color:white;">
<h1 style="display:inline">Green, color of hope</h1>
<span style="text-align:right">I hope to display this to the right</span>
</div>
</body>
</html>
Flexbox can do that:
<div style="background-color:green;color:white; display:flex; justify-content:space-between; align-items:baseline;">
<h1>Green, color of hope</h1>
<span>I hope to display this to the right</span>
</div>
I tuned alot and decide to use this as the simpliest solution to my problem. Note that as many solutions are proposed around the web, rare are those adressing (in a simple way) the problem for items to be baseline aligned while being of different sizes:
<style>
.left{text-align:left;font-size:18px;font-weight:bold;}
.right{float:right;font-size:14px;padding-top:4px}
</style>
<span class='left'>Left</span><span class='right'>Right</span>
Related
Ok, sorry I don't have any code to post but it's pretty simple.
I have a regular <h1> ...</h1> block of text that has been centered but I want to move it... Say maybe down 20 px.
How would I do this?
(I don't have a lot of experience with CSS)
the easiest way to do this is like this if you want to use css inline:
<h1 style="margin-top:20px">your text here</h1>
now if you have a style sheet made and linked to the document head such as
<link href="/css/style.css" rel="stylesheet">
then you can simple target the parent div and do the same thing like this
.parentcontainter h1{
margin-top:20px;
}
your html should look something like this
<div class="parentcontainer">
<h1>your text here</h1>
</div>
the second option will give you more controll in the long run and make it much easier to make changes if you have a lot of pages using the same styling.
h1 will have a default margin, but you can increase that. Try for example margin-top: 2em, which is twice the font-size of that element. (The default margin top and bottom would probably be already 1em, depending on the browser, so defining margin-top as 20px would not have much effect - just try different values to get what you want)
To achieve this you will need to use css on your <h1>.......</h1>
<style>
h1 {
margin-top:20px;
}
</style>
The HTML scheme is following:
<div class="items">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
.item CSS style:
float: left;
And the result:
But the white boxes are not aligned right one after another one -- where could be the issue? I;ve tried also using display: inline-block; instead of float: left;, but the result was basically the same.
Thank you
You can use CSS 3 column-width and column-gap like this..
http://www.bootply.com/118335
I run into the exact same problem and I found this one that worked for me.
https://github.com/kudago/waterfall
It depends only on js no css, though I'm still using bootstrap for other styling. I also use jquery.infinitescroll.js to dynamically load items and after the items are appended, waterfall will do its magic and put everything in place.
The only glitch I found is sometimes items could overlap a bit vertically, as soon as you keep scrolling down they are put correctly. I'm not sure why this is happening, a bit annoying but till I find something better.
Hope this helps.
I wanted to make a site with the grid system. ( I have made one already, so I know/knew how it works )
This is my custum grid: http://grids.heroku.com/grid.css?column_width=100&column_amount=8&gutter_width=15
And now comes the problem: When I try to put prefix_1 as a class nothing happen it just stays in the same place. And I have one prefix_1 grid_3 and one grid_4. so it is 1+3+4=8. My grid is 8 columns wide so it has to fit together easily, but it doesn't.
http://jsfiddle.net/gekkeabt/5LA82/
<div class="container_8">
<span id="download" class="prefix_1 grid_3"><b>Download</b> Leasy CMS</span>
<span id="download" class="grid_4"><b>Download</b> Macha Webserver</span>
<span id="about" class="prefix_2 grid_4 suffix_2"><b>About</b> Me</span>
</div>
I checked my code 100 times. But I can't find where it went wrong.
Maybe someone can help me out?
Thanks!
EDIT:
I solved the prefix and suffix problem by defining the class in another div outside of the span.
So it looks like:
<div class="prefix_1 grid_3"><span id="download">The content....</span></div>
Try removing the
padding:10px 50px 10px 50px;
line from your #download,#about CSS declaration (or at least the horizontal padding of 2 x 50px).
It's that extra padding that makes the elements wider than one row.
Here's how it looks without that line: http://jsfiddle.net/WHG4u/
Please add this css to your /css/custom.css to make the page stop jumping each time the slide changes
.avia-content-slider-active .slide-entry-wrap { height: 275px; }
I'm trying to make two horizontal divisons using <div> tag in html, but I couldn't make it. Can anyone help me make horizontal division using html and css with <div> tags?
<div id="firstDivistion" class="division"></div>
<div id="secondDivistion" class="division"></div>
.division{
width:50%;
height:100px;
float:left;
}
`<div style='float:left'>stuffs</div>
<div style='float:right'>stuffs</div>
<div style='clear:both'></div>`
Works well in every cases and is followed in many places...
Set the float property for each div to be matched, for example left to each, give each of them enough width so that the parent contains them.
DEMO
I have what seems like a simple problem, but i have yet to find a solution. I have a series of divs which may vary in height, thought they will generally be the same width. I would like a fluid layout that basically ends up generating a variable number of columns as the page is resized. Perfect for float left. The problem is that when the divs are different heights, there ends up being a lot of white space vertically between the elements.
Clearly, the simple solution is to write some javascript to do all of this for me. But i would hate to have to resort to that if there's a css solution.
Here is a simple example:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Simple Float Example</title>
<style type="text/css">
.dv { border: solid 1px red; float: left; width: 300px; }
</style>
</head>
<body>
<div>
<div style="height: 40px;" class="dv"></div>
<div style="height: 20px;" class="dv"></div>
<div style="height: 60px;" class="dv"></div>
<div style="height: 20px;" class="dv"></div>
</div>
</body>
</html>
You'll see that when the page is very narrow, everything looks as you would expect. All of the divs stack up. If you expand the page to full size, yet again - everything looks fine. But when there are 2 or 3 columns, look how much extra space there is. I'd post an image, but my reputation does not yet permit me to do so.
Anyway, i experimented with various display and position settings, and i couldn't get it to really do what i want.
Any suggestions? Thanks!
-RP
Are you after this type of look?
http://desandro.com/resources/jquery-masonry/
If so, no, there is no easy way to handle that with pure CSS. You need a bit of JS as well.
There is no particularly good way to generically handle this with CSS.
Read this previous answer I wrote that goes over the various options, and shows that they don't work:
CSS Floating Divs At Variable Heights
You're stuck with JavaScript. Fortunately, the JavaScript you need has already been written in the form of a jQuery plugin:
jQuery Masonry
I've suggested the same thing before:
Position floated elements directly under each other
css alignment question