Consider the following Fiddle: http://jsfiddle.net/wNrqu/
For the last 4 hours I have been trying to do something like this:
I'm trying to make the list display four items per 'row' with the two spans's centered underneath the image. The text must be able to wordwrap. CSS is one tricky beast to master!
If you check out the Fiddle, my result is somewhat odd. Items with larger text cause a blank gap to be inserted...
<div id="container">
<div><img src="kitten.png" />Cute Kitten<br />yes</div>
......
</div>
Then in your CSS:
#container {width: 1000px;}
#container > div {display: inline-block; width: 250px; text-align: center;}
That should do it. Much easier than using an unordered list because then you don't have any styles that a list has by default that need overriding.
If I'm doing this css, I will not using the order list, I will using div. Maybe this will help you.
<div id="container">
<div class="row clearfix">
<div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p> <p>yes</p></div>
<div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div>
<div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div>
<div class="img fleft"><img src=http://placekitten.com/132/185/> <p>Cute Kitten</p><p>yes</p></div>
</div>
</div>
then in the css
#container {width:1000px;}
.img {width:133px; height:200px; margin-right:20px;}
.img p{text-align:center;}
.fleft{float:left;}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
Please refer the following location:
http://jsfiddle.net/wNrqu/
Thanks for the help...although I didn't ask the question initially.
So far, it's working fine although I wanted to center everything so :
I changed the CSS from
#container {width: 1000px;}
#container > div {display: inline-block; width: 250px; text-align: center;}
to:
#container{margin: 0 auto;width: 1000px;}
#container div {display: inline-block; width: 150px; text-align: center;}
Related
So I was trying achieve this logo but the text wont go in middle.
I have tried vertical align and line-height but no luck. Hope someone helps :)
Code:
<div>
<div id="logo">
<div id=""></div>
<p>title<br>
text</p>
</div>
<div id="">
</div>
</div>
CSS
#header {height: 100px; background: #fff}
#logo div {background: url(/img/logo.png) center/contain no-repeat; width: 70px; height: 70px; float: left}
#logo p {vertical-align: middle}
try this css on the container element
display: flex;
align-items: center;
justify-content: center;
If you're using html and css, just make sure that both the text and the image are in the same div.
You can also follow this tutorial if that can make it easier: https://css-tricks.com/text-blocks-over-image/
Hope this works .
simple example
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span >verticle text.</span>
</div>
There are a few methods.
One of them is:
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
Try with text:
transform: translate(12px, 76px); //adjust it to fit your needs
Well flexbox is the easiest way to go around
<div id='foo'>
<div id='logo'><img src='path.png'></div>
<div id='text'>Title HEre</div>
</div>
CSS:
#foo {
display:flex;
align-items:center;
}
Sorry, I'm sure this question has been asked before, but if there anyway to do the following:
I have three divs in-line like the diagram shown below, when the browser window is shrunk it automatically drops each div to the next line. I know that I could use the #media command and assign a different css stylesheet if the browser is a certain size, but it would be great if I could make it fluid.
Before:
After:
Thank you!
Wrap the divs in a container element, like....
<div class="wrapper">
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
</div>
Then make sure .wrapper has a set width, most likely a percentage. If it has a set width and the inline elements are all floated left, once there is no longer room within the .wrapper div, they'll shift to the next line.
Try:
<div class='box'></div>
<div class='box'></div>
<div class='box'></div>
and:
.box {
background: #000;
width: 300px;
height: 300px;
float: left;
}
They should automatically drop when below 900px, see: http://jsfiddle.net/JQFH7/
Elements into it
<div id="wrapper">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div>
CSS
.inner
{
width: 100px;
height: 100px;
display: inline-block;
background: black;
}
div#wrapper
{
width: 100%;
text-align: center;
}
JSFiddle
I have the following CSS and HTML code:
div.container { height: 40px; }
div.container .title {}
div.container .link_buttons {}
<div>
<div class="container">
<div class="title">
<img width="16" height="16" src="/favicon.ico" alt="Text">
Test website
</div>
<div class="link_buttons">
<a target="_blank" href="http://www.test.com">
<img src="transparent.gif" class="background_image" alt="Text">
</a>
</div>
</div>
<!-- The same structure as the above but with different data. -->
<div class="container">...</div>
<div class="container">...</div>
</div>
I would like to align on the same line all the content present in each div.container and inside each div.container to make the div.title content to be positioned on the left and the div.link_buttons content to be positioned on the right. Made this, I would like to vertical align div.title and div.link_buttons in the middle of div.container.
How can I style the CSS the proper way? Or, have I to rethink and change the whole HTML code so to simplify things? If so, what I can make in order to have the same result?
Note: I tried to use float, but I am in trouble mostly because then I can not vertical align the div.title and div.link_buttons inside the div.container (as you can see in the above code, it has height: 40px;).
Here you go:
div.container { height: 40px; line-height:40px;}
div.container .title {float:left;}
div.container .link_buttons {float:right}
http://jsfiddle.net/WH4eK/
.title { float: left } /* Float them */
.link_buttons { float: right }
.container:after { /* And clear the float */
content: '';
display: table;
clear: both;
}
My problem is quite simple, but I couldn't figure out how to do it.
I have a div and inside it, I display some information . basically, something like this:
title1: 20
title2: 30
I want the title to be aligned to the left, and the number to the right.
Here is how I did http://jsfiddle.net/MmLQL/34/ . As you can see, I have a line break between the number and the title (which I believe comes from the use of h tag). But the thing is even if I use a span tag which is supposed to display elements inline and does not force line break, I lose the text-align right/left option. Here is an exmaple : http://jsfiddle.net/MmLQL/35/
You should try this way with "float:":
.container {
width: 100%;
clear: both;
}
.title {
float:left ;
display: inline;
}
.number {
float: right;
}
<div >
<div class="container">
<div class="title">title:</div>
<div class="number">number </div>
</div>
<div class="container">
<div class="title">title:</div>
<div class="number">number </div>
</div>
</div>
I'd do this woth float param. Like this: http://jsfiddle.net/dan1410/MmLQL/38/
Try this, http://jsfiddle.net/MmLQL/36/,
HTML
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
<div >
<h3>number </h3>
<h2 >title: </h2>
</div>
CSS
h2 {text-align:left}
h3 {
text-align: right;
float:right;
}
You might have to use float-clear on the divs though, this should help, http://www.positioniseverything.net/easyclearing.html,
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
..and modify the divs as class="clearfix".
I think the following should work, using inline-block to adjust the layout of the headers, then a float on the left-aligned one to ensure it's nestled against the right one.
div { width: 100%; }
h2 {
width: 50%;
display: inline-block;
float: left;
}
h3 {
display: inline-block;
width: 50%;
text-align: right;
}
You can also use CSS table/table-cells
<div class="container">
<h2>title: The Title</h2>
<h3>number</h3>
</div>
CSS:
.container {
border: 1px solid gray;
display: table;
width: 400px; /* set to 100% if full width */
}
h2 {
text-align:left;
display: table-cell;
}
h3 {
text-align: right;
display: table-cell;
}
See demo http://jsfiddle.net/audetwebdesign/pcZaq/
This approach is useful if you need some control over vertical alignment.
In addition, the table-cells will always remain on a single line, unlike floats or inline-blocks that could wrap to a second line for small screen sizes.
The choice depends in part on how you want the layout to behave in a responsive manner.
Instead of all the hacky solutions provided in other answers, it looks like you want to align tabular data. In which case, you should use a table for that.
Display:table-cell actually only exists in CSS to give the actual element and it's children their styles. It should not be used to let non-table elements behave like table elements. At least, imho.
Float:left seems like an ok alternative, if you're only looking for aligning the lay-out of the elements.
If your data actually is tabular data, then use a table. It solves your problem and is more semantic at the same time.
I have this HTML code:
<body>
<div id="div0" style="display:inline; background-color:green; width:100%">
<div id="div1" style="display:inline; background-color:aqua;width:33%"> </div>
<div id="div2" style="display:inline; background-color:red;width:33%"> </div>
<div id="div3" style="display:inline; background-color:yellow;width:33%"> </div>
</div>
</body>
I want to fill the page with div1, div2 and div3 but they don't fill the entire width.
What it's happening?
Taken from display declaration:
display: inline means that the element
is displayed inline, inside the
current block on the same line. Only
when it's between two blocks does the
element form an 'anonymous block',
that however has the smallest possible
width.
You cannot give an inline element set width or height dimensions, they will be ignored. An element must have a display type of block to do that. Setting display: block however will not achieve what you want since each element will fill the entire width. float: left will cause them to stack to the left and also forces display: block.
<head>
<style type="text/css">
#wrap {
width:100%;
}
#wrap:after {
/* Prevent wrapper from shrinking height,
see http://www.positioniseverything.net/easyclearing.html */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap .container {
float: left;
width:33%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container"> </div>
<div class="container"> </div>
<div class="container"> </div>
</div>
</body>
Mmmmm, semantics
See answer from Phunky for further comments on floating.
Use relative positioning on the outer <div> and float the inner <div>s. Don't use display: inline.
<body>
<div id="div0" style="border: 1px solid red; background-color: green; width: 100%; position: relative;">
<div id="div1" style="background-color: aqua; width: 33.33%; float: left;">a</div>
<div id="div2" style="background-color: red; width: 33.33%; float: left;">b</div>
<div id="div3" style="background-color: yellow; width: 33.33%; float: left;">c</div>
</div>
</body>
display:inline shrink wraps the content. You might want to try float:left instead.
Rory Fitzpatrick more or less has the ideal answer for you, although there is no need to set pos:rel on the #wrapper as it is already a relative block element and will span the full width by default.
When you float a block element it mimics the alignment functionality of display:inline and in an ideal world we would have access to the very useful display:inline-block which would have done exactly what you was expecting it to do.
But one thing you should remember when floating elements is that they will only take up the space they require (this includes margin and padding) unless you set a fixed width.
This is why Rory used width:33%; as that is the best you are ever going to get :)
Ideally this would have been a comment on Rorys post, but i've not got a high enough post count yet.
<body>
<div id="div0" style="float: left; background-color:green; width:100%">
<div id="div1" style="float: left; background-color:aqua;width:33%"> </div>
<div id="div2" style="float: left; background-color:red;width:33%"> </div>
<div id="div3" style="float: left; background-color:yellow;width:33%"> </div>
</div>
</body>
This should work for you. And the reason IIRC is that display: inline does not take % width.
Instead of using float you could use flexbox for a more responsive resizing. Also this forces the elements to remain in a row.
Example:
<head>
<style type="text/css">
#wrap {
width:100%;
display:inline-flex;
}
#wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
display: inline-flex;
flex-direction: row;
}
.container1 {
width:20%;
}
.container2{
width:80%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container1"> </div>
<div class="container2"> </div>
</div>
The best way to accomplish this, contrary to all the answers given before, can be found referencing the answer to this question:
3 inline-block divs with exactly 33% width not fitting in parent
The quickest and easiest way is not the prettiest to look at (putting your div's on the same line to remove the automatic single white space provided normally), but will work tremendously for what you want. The answer I am referencing list plenty of other way that, in my opinion, are better than any provided before, and address the true problem you are having.
Here is the code working exactly how you'd like, and a link to the fiddle!
<body>
<div id="div0" style="float: left; background-color:green; width: 100%;">
<div id="div1" style="margin: 0px; display: inline-block; background-color:aqua;width:33.33%"> </div><div id="div2" style="margin: 0px; display: inline-block; background-color:red;width:33.33%"> </div><div id="div3" style="margin: 0px; display: inline-block; background-color:yellow;width:33.33%"> </div>
</div>
https://jsfiddle.net/stopitdan/uz1zLvhx/