I'm pretty new to CSS and cannot figure out how to accomplish the following. I have tabular data. Some of the data elements have images associated with them. I want text in the cell left justified and I want the images in the same cell centered.
In other words, I want the same result as the following except inside a table cell.
<p>Some text.</p>
<img style="display:block;margin-left:auto;margin-right:auto;" src="myimage.jpg"/>
How can I accomplish this? When I try placing this inside a td element, both the text and the image are at the left side.
To use margin to center an element you need to have a set width:
<p style="text-align: left;">Some text.</p>
<img style="display:block;margin-left:auto;margin-right:auto; width:200px;" src="myimage.jpg"/>
Also, consider putting your styles in an external stylesheet and use selectors to target your elements.
Set your image to have absolute positioning, and it should work the way you want it. However, your text won't behave quite the way you think until you set a fixed width for your text element.
Related
Im learning html and css for now. Anyway, I am following a course, and have a queston.
This is my example code with logo of BBC and text next to it: http://i.imgur.com/kii6UPi.png
And once I add float: left; to logo, text moves up: http://i.imgur.com/SIDrCVx.png
Can anyone explain to me why this happens?
This is because by default your browser is rendering the image and the text as inline elements, therefore the baseline, or bottom of the image and text is lining up.
When you apply float:left to the image, it forces the image to display as a block rather than inline, so the text no long aligns baselines with it.
you can control them using different divs. <div class="wrapper"> <div>logo</div> <div>text</div> <div> you can control them separate, but try using float:left on the text as well, that might help.
Put simply, an img in html by default will take up the entire line that it's height occupies.
When you give an element the property of 'float', you tell it to become part of the regular flow of the page, and other elements can now wrap around it.
You may want to read up on both the float property and the inline-block
I'm sure this is some stupid CSS mistake, but in this template website I'm making, whenever I put more than one line of text in the content div, it misplaces the two background divs on either side of it. Here is the HTML and CSS:
http://pastebin.com/txmQzbx3
I have tried everything I can think of, but I don't know what could be wrong with it.
First, there's no such thing as float:center. If you remove that and change the position value for your content div from relative to absolute, then it works.
http://pastebin.com/B9tXgXYj
If you want to keep it fixed width then just add float: left to the content css
If you want to have it fluid then you'll want to take a look at using the display: table|table-row|table-cell css properties to do it
Try placing your backgroundright div above content div,
<div id="backgroundright">
</div>
<div id="content">
<p></p>
</div>
Hope this helps
I am currently developing a site and have encountered a strange problem with getting two of my divs to stay on the same line. The page in question is here: http://bit.ly/13QE7Zi and the divs I'm trying to fix are the text div in the middle and the small image beside it. In the CSS, I have these divs set to take up 1000px (20+640+20+300+20) which is the width of the container element, but if I do this, the second div gets pushed onto the next line. It only works if I decrease the width of the text div by 3 px, which is undesirable because then the edge of the image is not aligned with the right side of the page properly. This occurs in Chrome and Firefox. I'd prefer not to use floats because that breaks other aspects of the page. How do I get these two divs to stay on the same line and still fill the full 1000px of width?
The reason this is happening is because you have a 'space' character between your two inline blocks.
HTML doesn't really ignore all white space. You can have 1000 spaces and new lines between two elements and HTML would condense all those down into 1 single space when displaying.
Your inline blocks are setup in such a way that they there widths add up to be exactly 1000px, however you have a new line in between your two containing elements which condenses down to 1 space. Your precise measurement doesn't account for this extra space and so your inline blocks wrap to the next line.
Instead of decreasing your text's width by 3 px, decrease the padding-right on .looktrai-text it won't change the way it looks but will give enough room for both to fit.
You can use border-box box-sizing. That way the width of the elements will include the padding and the borders.
You can simplify your code, and even implement text wrapping around the image by doing the following.
Disclaimer: This is a suggestion based on the results you are trying to achieve.
Remove the .looktrai-text and .looktrai-sidediv divs
Format the HTML inside of #looktrai-content like this:
<div id="looktrai-content" class="clear">
<img src="content/looktrai_side.jpg" alt="" class="align-right" />
<p>My paragraph text</p>
<p>My second paragraph</p>
</div>
Add the following CSS:
img.align-right {
float: right;
margin: 0 20px 20px;
}
The result will look something like this: http://codepen.io/anon/pen/yjdxh
This is a cleaner, simpler approach that allows you to reduce code, and maximize flexibility.
I would use float: left for the text div, and float: right for the image div and remove the display: inline-block property. This creates a clearing issue for the footer, but this is easily fixed using one of the many 'clearfix' hacks. My preferred method is using a .group class on the parent container div, as per this article on CSS Tricks. In your case this would be <div id="looktrai-content" class="group">
I have a fluid page (100% width) with this inside:
[image-fixed-width] | [text-fluid-width -----------------------------------]
| -----------------------------------------------------
| -----------------------------------------------------
I need the text next to the image not to wrap around it, but to display next to it (like in the illustration), like another column. At the same time, the text needs to span across the entire page width.
This would be easy to by setting a margin-left to the text, but the problem is that I don't know the exact width of the image. The image size can vary...
Is there any solution for this?
Try adding overflow: hidden; to your content div. That should force it to stick to your columns.
http://jsfiddle.net/BG7FA/
Edit This will not work in IE6 (go figure)
Combine float: left on both elements with display: block on text.
The easier way to do this is to create a table with 2 cells, one for the image and one for the text. You won't use css but it works with any browser.
This is a guess, but I would expect it to work.
<div style='width:100%; overflow:hidden'>
<img style='float:left'/>
<div style='float:left'>my text</div>
</div>
The logic is that a div (even a floating div) should expand to fill the available space, and the parent will not stretch or allow overflow as both parameters are set.
I have a block of text, and inside the block I have an h1 tag floated left. I would like the first line of text to align with the bottom of the first line of text.
Here is the sample site:
http://myhealthsense.abyteshosting.com/
The block in question is the block under the header that says "Welcome! I am a..."
I want the 'Welcome!' to have it's bottom aligned with the rest of the sentence, and for the next line to wrap under the 'Welcome!'. As it is now, there are two lines wrapped to the right of 'Welcome!'.
Of course I could do this easily if all the text was together in a line, and I could use spans to set the sizes. But, since this is all generated out of drupal, the content comes as it is. In other words, the text in the block comes from the database, and is generated in a div, but the 'welcome!' has to be in the template. If I put it in the content div, my user will mess it up every time they edit the content.
Any hints are appreciated.
The <h1> is semantically incorrect for this usage. <h1> is a semantic tag used to indicate the title of an article or primary section of content. In this case you are attempting to use the <h1> tag to alter the presentation of the text rather than the purpose of it. For this, you would be better served by using the span tag and assigning a class style:
<p><span class="welcome">Welcome!</span> blah blah blahbitty blah</p>
Different idea:
Add a line-height to the first line of your paragraph tag to be equal to your Welcome line's expected height:
p:first-line
{
line-height: 1.5em;
}
This might cause an odd space in some browsers I think (I haven't tried it out yet).
Another idea:
You could add a style with top-padding to the block element you're using for your primary content area. This would prevent text from starting until it is ready to start. Keep in mind this approach adds this padding to the overall size of the block element, so a block element with a height of 100px and a top padding of 20px will actually be 120px.
You could put your text in <p></p> and specify display:inline; for both h1 and p. IE:
<h1>Welcome!</h1><p>Mytext here</p>
Then a float is unnecessary.