I'm just trying to align some text on the same line, my CSS is this:
#logo {
width: 600px;
margin: auto;
margin-top: 250px;
}
And my code:
<div id="logo">Text Here
<div align="right">Text There</div>
</div>
this is what it shows:
would you guys happen to know what it is that I'm doing wrong? I tried inline styling for the second div, for a padding: 0; and margin: 0; but didn't work.
I just want it to be on the same line, but adjusted on the right. Thanks for all suggestions.
Place divs side-by-side in a container
<div style="width:600px;">
<div id="logo">Text Here</div>
<div style="float:right;">Text There</div>
</div>
Then add display:inline-block; CSS property to both the divs.
Fiddle
divs are automatically set to be in 'block' format, which means they will not allow anything to align with them.
To fix your problem, but this code in the div tag with 'align="right"':
style="display: inline;"
Related
So, I need to get 2 images next to each other, but centered. I've gotten to figure out how to center an image, but not how to center two of them. The problem is in the CSS with display: block;, and display: inline-block; doesn't work - it's as if it's simply inline.
My code to center one image:
CSS:
img {
margin: 0px auto;
display: block;
}
HTML:
<h1>This Week's Photo Features</h1>
<img src="images/photos/BarcelonaGraffiti.jpg">
<img src="images/photos/BoulderButterfly.jpg">
Use CSS.
<div style="text-align:center">
<img src="images/photos/BarcelonaGraffiti.jpg">
<img src="images/photos/BoulderButterfly.jpg">
</div>
The previous answers are more-or-less correct, one solution is to put the images in a container and center the container:
div {
margin: 0 auto;
width: 220px;
}
Here's a fiddle to better demonstrate:
https://jsfiddle.net/boa5rej1/
Place both images in a container and center that container like this
<div align="center">
<img src="images/photos/BarcelonaGraffiti.jpg">
<img src="images/photos/BoulderButterfly.jpg">
</div>
You can use Almost any container you like.
Demo of Problem
Kind of Solved Problem
It is only kind of solved because I want to be able to have divs with different sized content
Edit:
Now what I need is a way to make it so these divs don't interact like this while behaving the same way
First, an image:
And now some code:
So I have two divs that are positioned next to each other with this CSS:
.horizontal {
position: relative;
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
display: inline-block;
overflow: hidden;
The div on the left has a spacer with this:
.tspacer {
width:100%;
height:110px;
It then has an iFrame, this is the HTML for the left div:
<div id="home" class="horizontal" style="font-family: 'Press Start 2P', cursive;">
<center><img src="img/light.png" class="home-light" /></center>
<div class="tspacer"></div>
<iframe src="iframe/home_slider.html" width="100%" height="300px" frameborder="0"></iframe>
</div>
And the div on the right just has some text:
<div id="ent" class="horizontal" style="background-color:#F00">
Entertainment
</div>
Finally, what the heck I need:
I need to make the entertainment div snap to the top of the page. This page contains a grid of divs (Click here for more on that) and for some reason all the other divs in the next rows and columns are being pushed down by the content of the first (I think) The thing that confuses me is that the slider has a shadow inside the iframe and the right div seems to start in the middle of that. Anyway, why wont they line up in a normal, not offset, grid.
I believe you're missing vertical-align:top in your .horizontal class
Updated fiddle
try using float:left and float:right instead of display:inline-block
try changing the width:
.horizontal{ width:50%; }
assuming you want 2 columns.
Is this what you are looking for? Fiddle
There are 2 things that need to be modified.
1) The CSS (p was causing the spacing issue since it was set to block)
p {
display:inline-block;
}
2) The HTML (just remove the spaces between the divs
</div><div...
<!-- no space above -->
Alright so I have
<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
Only one word will go into each div. I want the width of each div to be auto
and I want to word from #2 to be in the middle of the screen using text-align: center; with the word in #1 being displayed directly to the left of #2 and the #3 directly to the right of #2.
I have been trying different css for a while, but to no effect.
Hoping someone has a simple answer.
Simply float all the divs to the left. They will display in order.
<style>
.my-dvis {
float:left;
width:33.33%;
margin:0;
padding:0;
border:none;
}
</style>
<div class="my-divs"></div>
<div class="my-divs"></div>
<div class="my-divs"></div>
text-align: center only applies to inline elements.
jsfiddle
HTML
<div class="left">1</div>
<div class="middle">2</div>
<div class="right">3</div>
CSS
body { text-align: center; }
div { display: inline-block; }
Have you tried floating id=1 to the left and floating id=3 to the right?
I suggest you to use <span> tag instead of using div tag,because div have a property of taking width 100%.
Or else if you want to use div tag then use in the following manor
<div id='1'></div>
<div id='2'></div>
<div id='3'></div>
<style>
div{
float:left;
width:33.3%;
}
</style>
I am new in designing and so have some problems...
I need 3 block to be inline and centered, so I tried:
#main .block{
display: inline-block;
border: 1px solid #ECEDE8;
margin: 10px 10px;
overflow: hidden;
height: 265px;
width: 265px;
}
But, when i add an image in to the block, all others goes down.
P.S.
As I see, this problem is in safari, in Firefox all ok.
P.S.S
<div id="main">
<div class="block">main
<img src="style/images/try.png">
</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
<div class="block">main</div>
</div>
P.S.S.S
As I could figure it out thought Google, all problem is in display: inline-block, in safari works display: inline-table. What solution could be?
You need to set the vertical align property. In this case best option would probably be:
vertical-align: top
So your css should be:
#main .block{
display: inline-block;
border: 1px solid #ECEDE8;
margin: 10px 10px;
overflow: hidden;
height: 265px;
width: 265px;
vertical-align: top;
}
If your blocks are fixed width, why not float them instead and put them in a parent container with a total width and centered using margin: 0 auto
The div element is a block element. The img element is an inline-block element; it has the main features of a inline element (except that it has the block element features of height and width). Therefore, I see two main problems with your code. Firstly, your image is somehow meant to replace the same unit of space as where you as simultaneously displaying the word "main" which can cause a conflict with spacing/display. [I recommend deleting the word "main" from your HTML.] Secondly, you don't specify the height and/or width of the image, which is not really a problem since you have overflow value set to hidden, but still generally you should have a height and/or width value assigned (make them less than the parent container's height and width) as it will make the browsers rendering/displaying more universal/compatible cross-browsers. Implementing a combination of those two things [or of changing your display value to inline-table (which it kind of seems more like what you want since your display seems "tablular")] SHOULD fix your problem. If it doesn't, I would recommend changing your margin value to 0 auto (which will have the effect of centering your image in the middle of your div/parent container), because I have a lingering suspicion that your margin values may also be at play (but only if the other two suggestions don't work). Good luck!
PS: Remember that just because you have overflow: hidden doesn't mean that the browser doesn't "see" the element(s) that are overflowing. Remember the Box Model.
Try this -
<div class="main" id="main">
<div class="block">main
<img src="style/images/try.png">
</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
<div id="main">
<div class="block">main</div>
</div>
And instead of #main .block{ just .main {
When doing something like this:
<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>
I have to use an empty div with
clear: both;
which feels very dirty to me.
So, is there a way to align without the use of float?
Here is my code:
.action_buttons_header a.green_button{
}
<div class="change_requests_container" style="width:950px !important">
<div class="sidebar">
Preview New Version
</div>
<div class="content_container">
<div class="content">
<div class="action_buttons_header">
<a href="/changes/merge_changes/422" class="re_publish publish green_button" style="
margin: 5px 0px 5px auto;
">Apply Changes</a>
</div>
<div id="change_list_container">
<div class="changes_table">
<style type="text/css">
#original_492 .rl_inline_added {
display: none;
}
#492.change_container .actial_suggested_text_container{
display: none;
}
</style>
<div class="content_section_header_container">
<div class="content_section_header">
The Zerg |
Overview
<div class="status" id="492_status">
<div id="492_status_placeholder">
</div>
</div>
</div>
</div>
<div class="change_container" id="492">
</div>
</div>
</div>
</div>
I want the green button on the right of the horizontal bar that it's in but in the cleanest way possible.
Just trying to learn how to do CSS elegantly, cleanly, etc.
Another way to do something similar is with flexbox on a wrapper element, i.e.,
.row {
display: flex;
justify-content: space-between;
}
<div class="row">
<div>Left</div>
<div>Right</div>
</div>
In you case here, if you want to right-align that green button, just change the one div to have everything right-aligned:
<div class="action_buttons_header" style="text-align: right;">
The div is already taking up the full width of that section, so just shift the green button the right by right-aligning the text.
you could use things like display: inline-block but I think you would need to set up another div to move it over, if there is nothing going to the left of the button you could use margins to move it into place.
Alternatively but not a good solution, you could position tags; put the encompassing div as position: relative and then the div of the button as position: absolute; right: 0, but like I said this is probably not the best solution
HTML
<div class="parent">
<div>Left Div</div>
<div class="right">Right Div</div>
</div>
CSS
.parent {
position: relative;
}
.right {
position: absolute;
right: 0;
}
It is dirty better use the overflow: hidden; hack:
<div class="container">
<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>
</div>
.container { overflow: hidden; }
Or if you are going to do some fancy CSS3 drop-shadow stuff and you get in trouble with the above solution:
http://web.archive.org/web/20120414135722/http://fordinteractive.com/2009/12/goodbye-overflow-clearing-hack
PS
If you want to go for clean I would rather worry about that inline javascript rather than the overflow: hidden; hack :)
Another solution could be something like following (works depending on your element's display property):
HTML:
<div class="left-align">Left</div>
<div class="right-align">Right</div>
CSS:
.left-align {
margin-left: 0;
margin-right: auto;
}
.right-align {
margin-left: auto;
margin-right: 0;
}
Very useful thing have applied today in my project. One div had to be aligned right, with no floating applied.
Applying code made my goal achieved:
.div {
margin-right: 0px;
margin-left: auto;
}
You could just use a margin-left with a percentage.
HTML
<div class="goleft">Left Div</div>
<div class="goright">Right Div</div>
CSS
.goright{
margin-left:20%;
}
.goleft{
margin-right:20%;
}
(goleft would be the same as default, but can reverse if needed)
text-align doesn't always work as intended for layout options, it's mainly just for text. (But is often used for form elements too).
The end result of doing this will have a similar effect to a div with float:right; and width:80% set. Except, it won't clump together like a float will. (Saving the default display properties for the elements that come after).
No need to add extra elements. While flexbox uses very non-intuitive property names if you know what it can do you'll find yourself using it quite often.
<div style="display: flex; justify-content: space-between;">
<span>Item Left</span>
<span>Item Right</span>
</div>
Plan on needing this often?
.align_between {display: flex; justify-content: space-between;}
I see other people using secondary words in the primary position which makes a mess of information hierarchy. If align is the primary task and right, left, and/or between are the secondary the class should be .align_outer, not .outer_align as it will make sense as you vertically scan your code:
.align_between {}
.align_left {}
.align_outer {}
.align_right {}
Good habits over time will allow you to get to bed sooner than later.