I have two divs one is a picture and the other is text. I am putting these two divs inside a parent div and using as my header. My image is much taller than the text. What I want to do is put the image all the way on the left and the text on the right vertically aligned at the bottom to align with the images bottom. I am having a hard time doing this. Also, I can't use float because when I view the page on a mobile phone because of the width the text breaks to the next line which is fine but using float:right it goes to the right which is not what I want here is what I am trying.
<div id="header" style="overflow:auto"><div style="float:left;">
<img src="Images/crescentlogo.png" /></div>
<div><h4 class="gold">Daily <span class="DarkGreen">EXCEEDING</span> <span class="gold">our Customers'</span> <span class="DarkGreen">EXPECTATIONS</span></h4></div>
</div>
Any ideas?
Thanks,
Heres the code for it:
<!DOCTYPE html>
<html>
<head>
<style>
h4{
display: inline;
}
</style>
</head>
<body><div id="header">
<img src="Images/crescentlogo.png" id="img" />
<div id="text" style="display: inline;"><h4 class="gold">Daily <span
class="DarkGreen">EXCEEDING</span>
<span class="gold">our Customers'</span> <span class="DarkGreen">EXPECTATIONS</span></h4> </div>
</div>
</body>
</html>
Link for JSFiddle: http://jsfiddle.net/w5wCG/1/
Give float:left to img and also give float:left to div, it will place side by side
img div {
float:left; }
Related
I want to start off saying that I just started learning CSS, (got done learning HTMl couple days ago) and I'm having a little bit of trouble with how to put input text in the middle with pictures next to input text. To be a little bit more specific look at my code.
<html>
<head>
<title>Login</title>
</head>
<body>
<div class="Wrapper">
<div class="main">
<form>
<div>
<div>
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-64.png">
</div>
<input type="text" placeholder="Username"><img src="https://cdn1.iconfinder.com/data/icons/ios-11-glyphs/30/key-16.png" </div>
<div>
<input type="text" placeholder="Password"><img src="https://cdn4.iconfinder.com/data/icons/geomicons/32/672396-lock-16.png" </div>
</form>
</div>
<div>
</div>
</body>
</html>
it will basically show you 2 input boxes, one for username another with password, with 2 pictures next to those boxes, the key one for user, the lock one for password.
TLDR; I want the input boxes on the middle of the page with the pictures(little icons) next to the input boxes (like showed in my code, but in the middle) and a I also want the picture of the user (the head one) in the middle of that whole structure, or middle of the page.
basically I would like to see everything aligned.
I don't know if I expressed myself well enough, I hope so. I would like to see the html and css code, thank you so much!!!
Try with this
.main {
text-align:center;
}
<html>
<head>
<title>Login</title>
</head>
<body>
<div class="Wrapper">
<div class="main">
<form>
<div>
<div>
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-64.png">
</div>
<input type="text" placeholder="Username"><img src="https://cdn1.iconfinder.com/data/icons/ios-11-glyphs/30/key-16.png" </div>
<div>
<input type="text" placeholder="Password"><img src="https://cdn4.iconfinder.com/data/icons/geomicons/32/672396-lock-16.png" </div>
</form>
</div>
<div>
</div>
</body>
</html>
To align images the best way is use this css style:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
In your code, I'm using text-align becouse works thanks to the "div".
Text-align property work with block containers, not with inline elements, and img is an inline element, but div is block.
Maybe try adding Style Attribute to your code inside <head> </head>
<style>
.center {
margin: auto;
width: 60%;
padding: 10px;
}
</style>
#align_text_center{
height:100%;
display:flex;
}
#aligned_text_h1{
margin:auto;
}
<html>
<body>
<div id="Container1">
<div id="align_text_center">
<h1 id="aligned_text_h1"></h1>
</div>
</div>
<div id="Container2">
<div id="align_text_center">
<h1 id="aligned_text_h1"></h1>
</div>
</div>
</body>
</html>
Welcome! I got again a bit problem while positioning the texts to it's position. I have a h1 element in the center of container1,container2 id's.
I want to align a second(and later a third) text below the first h1 element. I can't say it, so I made an interactive image about it. :(
Thank you for help! :)
I draw an interactive image,click here.
Place all the elements you want to position in the same div, and then position that div, rather than positioning each element separately.
I'm sure it's an easy question but I can't figure it out.
I have this code basically
<div>
<img />
<p></p>
</div>
<div>
<img />
<p></p>
</div>
I want the image to align to the right of the text within the div. Everything I've tried so far takes the image out of the normal page flow making the div not respect the height of the image. I can't just explicitly state the height of the div because the image inside is dynamic and only of set width.
Here's what the page looks like.
How do I align the image to the right of the div and still have the div respect the height of the image.
Basically your div must have overflow:hidden, look example:
<div style="overflow:hidden">
<img style="float:right; width:100px; height:100px"/>
<div>text text text text text text text text</div>
</div>
<div style="overflow:hidden">
<img style="float:right; width:100px; height:100px"/>
<div>text text text text text text text text</div>
</div>
Alternatively you can put <div style="clear:both"></div> after each div
In css set the overflow of the div that has to respect the height of the image to auto.
div {
overflow: auto;
}
It is because of the float on the image. In order to fix this, you may use a method called clearfix on the container element: div.infobox
.infoBox:after {
content: "";
display: table;
clear: both;
}
Fiddle here.
I'd like to align horizontally an image and paragraph of text next to each other within my main div element of my web page.
The divs are wrapped like this:
<div id="main">
<div id="image">
</div>
<div id="paragraph">
</div>
</div>
Is this the right layout? If so, what CSS do I need?
You need to set both of the inner divs to
display: inline-block;
Check out this fiddle. https://jsfiddle.net/m8athtLp/light/
You can do using two way:
Firstly, From your markup, You can use css to float: left image and float: right paragraph.
Secondly,
<pre><div id="main">
<img src="images/img.jpg" alt="">
<p>your text</p>
</div></pre>
For this this code you can use float: left for image, paragraph text auto align right
Thanks
What I like to do is to use a DIV's vs. Table.
I like to show an image and to the right of that image show text. The text should be aligned to the top edge of the image. There should be some spacing between the text the image.
I have the following code but seems like the image comes and then the text comes below it:
<div style="float:left">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
</div>
<div style="clear:left"></div>
<div style="float:left">
%#Eval("title")
</div>
<div style="clear:left"></div>
You could use a float/overflow trick:
<div class="imgCont">
<img src="../../images/img1.png" alt="Description" width="32" height="32">
</div>
<div class="text">
%#Eval("title")
</div>
I used classes instead of inline styling:
.imgCont{float:left; margin-right:10px;}
.text{overflow:hidden;}
JSFiddle
You just need to remove the first
<div style="clear:left"></div>
HTML :
<div id="wrapper">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
<div>image</div>
</div>
CSS :
#wrapper img, #wrapper div { float: left; }
#wrapper div { margin-left: 100px; } /* the size of your img + the space wanted */
I don't understand why you have this 2 divs:
<div style="clear:left"></div>
They just prevent your text div and your image div to be on the same row. Css property "clear" make your container to NEVER have another container floating, here on his left.
<div style="float:left">
<img src="../../images/img1.png" alt="Description" width="32" height="32"></a></p>
</div>
<div style="float:left">
%#Eval("title")
</div>
It would be enough
Here is the answer!
Obviously use div. Here is a simple example!
You can first create a parent div then inside that parent div, you can create 2 divs like
<div>
<div class="float-left"><img src="~/link_to_file.png" alt="photo" /></div>
<div class="float-right">The text that would flow at the right side..</div>
</div>
Here is the CSS for that.
You will be displaying them inline! I mean one div on left other on right!
You will be displaying the text on the top corner! Which means no margin-top for the text div.
Here is the CSS code:
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-left, .float-right {
display: inline; // use inline-block if you want to add padding or margins..
}
This way, the div with the image will align to the left and the other div will be placed to the right side! And they both will be in a line. As you want them to be.
Good luck, cheers! :)