Align divs next to each other - html

I have a WordPress site where I am using shortcodes to align images in four columns. This normally works fine but for some reason each image isn't aligned directly next to the other, but instead slightly indented from the top of the other.
You can see my site as an example here: http://goo.gl/e7gUo
Does anyone know how to fix this issue?
The CSS for the shortcode column is currently:
float:left;
margin-right:4%;
position:relative;
width:22%;

Add:
.one_fourth{ float: left; }
And remove the <br>s between them.

Remove <br /> after each block with image

Related

How to right align an image in flexbox without justify-content?

I'm making an html email and I have some text and an image in a flexbox. I want to right align the image irrespective of the amount of text on the left. I used "justify-content: space-between" initially which would normally do the trick but that's not working with G-Mail. Any alternatives?
Hope you are using the table format for the e-mail part. And FYI, Gmail does not support flexbox.
To make the image align to the right, apply text-align: right; in the parent element of the img tag.
I suppose you are trying to align the text and the image on the same line but image will align on the left and the image on the right...
Try this:
h3 /* (or whatever element you are using for your text) */
{
text-align:left;
display:inline;
}
img{
display:inline; float right;
}

Right aligning div inline with a left aligned div?

I am experiencing difficulties when I am trying to Right align text links inside a div. I'm not sure what I am doing wrong. But this is the code for the div that is supposed be right aligned:
<div class="menu">
Home
Sign In
Join The Crowd!
</div>
And all the code is here: http://jsfiddle.net/GSfmf/1
I am wanting the buttons still vertically-centered in the header_div, but aligned to the right. And anything that I do doesn't move it.
Thanks, sorry for being foolish about the css.
Take out display table from your header div. Is there a reason your displaying it as a table?
Works fine when you take out display header
div.header_div{
background-color: #ffffff;
padding: 15px 50px 15px 50px;
}
in the css stylesheet just add the following code...think it wd work
.menu{ float:right;}

CSS Vertical Align Top not working - can I use a different method that is correct in coding instead?

I have put together an example bit of code as I am trying to get 2 images of different sizes to be aligned at the top such as shown below:
HTML
<div id="test">
<div class="social-media">
<img src="http://www.ok.gov/ltgovernor/images/Facebook-icon.png" width="120"/>
<img src="http://semanticweb.com/files/2012/01/twitter_logo.jpg" width="50" />
</div>
</div>
CSS
test {
width:980px;
margin-left:auto;
margin-right:auto;
position:relative;
}
.social-media {
position:absolute;
background-color:#000;
right:0;
top:0;
vertical-align:top !important;
}
I realise now after reading a few posts online that vertical-align will not work in divs and solutions have been to use absolute positioning instead. The only issue is that I am already using absolute postioning for the images parent div.
Would it be good practice to do absolutes inside a parent div that is also an absolute.
However if i was to put an absolute positiong on the img then all img's would stack ontop of each other unless I was to specify each and every img with a class.
So my next thought was to put a float on img within the div. I just wanted to know if this is good practice or if anyone can tell me a cleaner way of doing this?
Also, if I were to want the images to be centrally aligned, how would this be done as the float method works in the sense of getting the images to align at the top but I am not sure how I could align centrally or maybe at the bottom?
Put overflow:auto on the social-media div then add float:left to your images.
Keep in mind you can also use negative integers like vertical-align: -1px; to go up -1px
For more details see CSS vertical-align Property and try it out here.

Title appears right aligned!

http://www.perfectclaims.com/ppiclaimsnew/
I dont understand why the first part of the title is right aligned?
any ideas?
Thanks
<div id="breadcrumb">
That div is creating space. I would guess you want to give it a width of 100% to make it fill horizontally so the title below has the full width to work with.
Incidentally, I was able to find out the information easily by using firebug, which is an extension for firefox.
Because that breadcrumb div is floating in the way of it. You can move the title paragraph down manually, or you can use the CSS property clear to avoid this.
It's because you're floating the breadcrumb trail to the left (and for no apparent reason, I might add). You can either remove the float CSS attribute from #breadcrumb or add clear: both; to .title.
add clear: left; to your paragraph <p class="title" style='clear: left;'>
Just remove the line float:left from id #breadcrumb.. Here float:left is not needed
so your code looks like below
#breadcrumb {
background-color:#FFFFFF;
color:#999999;
font-size:10px;
margin-top:5px;
padding-bottom:10px;
position:relative;
width:550px;
}
Cheers !!
If you are using google chrome, place the mouse over the element, right click and select 'inspect-element'.

Why doesn't my background stretch behind my contentbox?

I cannot get the background to stretch behind the contentbox. The strange thing is, it works with Internet Explorer, but not with Firefox.
I hope it is enough to give you a link, since I do not know where the problem is in the code, it would not make much sense to post the whole code in here.
http://www.yiip.de/arbeit/testlayout/standard_template.html
You can also add overflow:hidden; to #shadow. That will clear the floats without having to put additional markup in your html.
try adding the following 'clearfix' style to your wrappers
.clearfix:after {
content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
}
.clearfix {display:block;}
You need to clear your 3 floated divs for the containing div to expand vertically around them. The easiest way to do this is to add
<br clear='both' />
after the third floated div (but within the container div).