Div element next to another div elemnt - html

I am trying to make a messaging app. I have found some good css from metroui.org.ua.
I want my app to look like this.
This is the code I have written.
<div >
<div style="display: inline; padding-left: 150px; width: 50px; float: left;">
Hi Username,
<br />
Company
</div>
<div style="padding-left: 50px; padding-right: 200px; display: inline-block">
<div class="balloon right">
<div class="padding20">
Balloon is represent to create information or dialog UI. You can put inside any
of elements.
</div>
</div>
</div>
</div>
It works but when I put <br/> tag for company it messes up.
Also I am not getting the balloon right to display correctly.

Maybe try putting Username and company into paragraph tags?
Like:
<p>Username</p>
<p>Company</p>
Try it and see if it works

Related

Is there a way to right align labels with missing values in CSS without a complex setup?

I have the following right aligned and would like the labels to all line up if for example the other values are missing. In the code below I only have the Phone number and when that happens it looks awful.
<div style="text-align: right">
Phone: 555-555-5555<br/>
Cell: <br/>
Work:
</div>
How Can I have the labels all line up nicely so that if there is a missing value it's just blank rather than what I see now?
Something like this?
<div style="text-align: right">
<div style="float:right;text-align:left">
Phone: 555-555-5555<br/>
Cell: <br/>
Work:
</div>
</div>
Or float the parent right and the child left, but then you might need to set the widths specifically
You can create a parent div with float: right and inside that, you can text-align: left your div:
.parent{
float: right;
}
<div class="parent">
<div style="text-align: left">
Phone: 555-555-5555<br/>
Cell: <br/>
Work:
</div>
</div>
Is something like this what you are after?
.label {
display: inline-block;
width: 150px;
text-align: right;
}
<div>
<div><span class="label">Phone:</span> <span>555-555-5555</span></div>
<div><span class="label">Cell:</span></div>
<div><span class="label">Work:</span></div>
</div>

Having two <div> blocks aligned side by side - Wordpress website

I'm creating a custom landing page for my employers website.
http://juniorgoldreport.com/welcome/ this is the landing page.
I'm just trying throw some idea's until we find something solid, so at the moment the landing page is extremely simple.
I'm having trouble splitting my body into two different div blocks.
<div class="welcome-landing">
<div class="landing-header">
<div class="logo-img">
<img src="http://juniorgoldreport.com/wp-content/uploads/2016/05/logoo2.png" alt="junior gold report logo" />
</div>
</div>
<div class="landing-bar">
<ul class="landing-nav">
<li> About Us </li>
<li> Accredited Investors </li>
</ul>
</div>
<div class="landing-body">
<div class="body-left">
[layerslider id="11"]
</div>
<div class="body-right">
TEST BLOCK
</div>
</div>
<div class="landing-footer">
FOOTER TEST
</div>
</div>
Where you see the "TEST BLOCK" is the block I'm having trouble with. I have a subscribe button in there right now when you look at it in the website.
Remove any character between two horizontal Divs
<div class="landing-body">
<div class="body-left">
//content here
</div><div class="body-right"> <-- </div><div> No character in between
//content here
</div>
</div>
add following css
.body-left, .body-right {
display: inline-block;
width: 50%;
margin: 0;
padding: 0;
vertical-align: top;
}
You need to use
1) float:left
or
2) display:inline-block
for both blocks
http://c2n.me/3yr3jOw
I'd make this a comment but I don't have enough points.
Try adding float: left; to your CSS for the .body-left div, and float: right; to .body-right.
Also, your <footer> tag should include clear: both;.
There's a lot more to be taken care of here, but this should get you on the right path.

Make element appear to the right of a div

I'm making this little website, and I'm trying to make user profiles. I'm honestly not the best with HTML and CSS but basically, my problem is, that I want to display the profile picture in the top left of the "jumbotron" (I'm using bootstrap), and have the username just to the right of it, with a little paragraph/quote/motto beneath the username. However, I cannot get it to work.
Here is my current code:
HTML
<div class="container">
<!-- Profile Jumbotron-->
<div class="jumbotron">
<div class="profile-picture">
</div>
<h1><?php echo "$profile_name" ?></h1>
</div>
</div>
CSS:
.jumbotron {
margin-top: 5%;
margin-bottom: 2%;
}
.profile-picture {
width: 200px;
height: 200px;
background-color: white; /* Just as a test profile picture */
}
Here is the result of this code
I have tried to right-align the text, but to no avail.
Of course, there's the obvious float:right, which works well enough, but then the height of the jumbotron gets all screwed up! Unless I am doing something wrong with that.
So with all that said, I hope someone can help me, as you seem pretty helpful here!
Thank you for taking the time to read my issue, and I hope you can assist me in fixing it!
<div class="container">
<!-- Profile Jumbotron-->
<div class="jumbotron col-md-12">
<div class="profile-picture pull-left col-md-5">
<img class="img img-responsive" src="Your image" style="width:200px"/>
</div>
<h1 class="pull-right col-md-7">
<?php echo "$profile_name" ?>
</h1>
</div>
</div>
.profile-picture {
background-color: white; /* Just as a test profile picture */
}
I think something like this would do the trick since you are using bootstrap framework. Note the css classes I have put pull-left and pull-right. col-md-5 and col-md-7 are used to divide the div columnwise.
by using img-responsive you will be able to proportionally align image inside the div.
You can do one easy thing (picture, name and quote are all divs):
<------------------- LARGE DIV ------------------->
<---PICTURE(float:left) NAME(float:right)
<br>
QUOTE(float: right)
<------------------------------------------------->
How to accomplish this:
<div id="profileContainer" style="width: 800px;">
<div id="picture" style="width: 200px; float: left;"><img src="yourimage.jpg"></div>
<div id="name" style="width: 400px;"><?php echo "$profile_name" ?></div>
<br>
<div id="quote" style="width: 400px; float:right;">Text about stuff</div>
</div>
So basically you have the profileContainer div with a width you want, the picture with the width of the div being the picture size and the name floating to the right. By changing the profileContainer width you can get the name closer to the picture, or you can also set a margin-right: #px; on the Name and the Quote.

Aligning Divs By Floating Right

Im having trouble getting some divs to float and align properly.
I have two divs that contain images that are working properly, and I need to add two more, with images that behave the in the same manner.
I tried to use the same code to make the current divs work properly, but they automatically seem to remain allocate themselves within the same div as the other images that I'm trying to use.
//Here is the Code.
<div id="products">
<img src="cbdog.jpg" style="float: left; padding-bottom: 25px;">
<br>
<br>
</div>
<div id="otherProducts">
<br>
<br>
<img src="gelog.jpg" style="float: left;">
</div>
Im trying to this is inline obvisouly.
So I tried to do.
<div id="products">
<img src="cbdog.jpg" style="float: left; padding-bottom: 25px;">
<br>
<br>
</div>
<div id="otherProducts">
<br>
<br>
<img src="gelog.jpg" style="float: left;">
</div>
<div id="cbdGel">
<br>
<br>
<img src="gelog.jpg" style="float: left;">
</div>
And Basically replicate the previous formatting to get the same result, but the resulting image just places itself with the same div as the top image.
Any help would be greatly appreciated. Thanks in advance.
~zaklikescode
If i understand correctly, you want two divs side by side? if so. You'll need to assign a width and position either inline using the style="" attribute or in css
#products, #otherproducts { float:left; width:48%; position:absolute; }
if not, let me know. I'll see what i can do.

Right-align two divs

Using CSS, is it possible to right-align two DIVs?
I have a title and I want to right-align a more link underneath it. The site is internal and so, unfortunately, IE7 is the primary browser. (We will upgrade to IE8 before the end of the year, and some are using Chrome). I'd like to avoid javascript, but I'm open to it.
The title changes, so absolute widths won't work. It should look something like this:
| Arbitrarily long title text
| more...
I've been all over the Googles looking for a solution, but everything I've found so far relates to right-aliging the content of a DIV, or to right-aligning a DIV to the page, or right-aligning a DIV within an absolutely sized DIV.
I can show you my efforts so far, but as none of them work, I don't think they're of much use.
<html>
<body>
<div style="float:left;">
Arbitrarily long title
<div style="float:right">more...</div>
</div>
<div style="width:0px; overflow:visible; white-space:nowrap;">
Arbitrarily long title
<div style="float:right">more...</div>
</div>
<!-- This sort of simulates what I want, but the title length is arbitrary and I don't want to have to measure the text -->
<div style="width:120px;">
Arbitrarily long title
<div style="float:right">more...</div>
</div>
</body>
</html>
If anyone knows of a duplicate question, I'd love to learn the secrets of your Google-fu!
EDIT
Image, as requested. The link is bordered with red. (I had to set the margin-left to 70px to achieve this affect.)
<div style="float:left; position: relative">
<div>Arbitrarily long title</div>
<div style="position:absolute; right: 0">more...</div>
</div>
http://jsbin.com/efixij/7/edit
Another way you might solve it (I don't have IE here, so I can't test it now, but I used similar styling on cross browser before).
Snippet
.title-block {
float: left;
position: relative;
padding-bottom: 1em;
}
.more {
position: absolute;
right: 0;
bottom: 0;
}
​
<div class="title-block">
<div>Arbitrarily long title</div>
<div class="more">more...</div>
</div>​
This might not be very useful but give it a look:
Align main Div content to left and then the "more" div to righ as here :
<div style="float: left;">
<div>
Arbitrarily extra extra long title here
</div>
<div style="float:right;">
more...
</div>
</div>
<div>
<div> Business area </div>
<div> Inernal Audit </div>
<div style="text-align: right;"> More... </div>
</div>
<div class="one">
Arbitrarily long title Arbitrarily long title
<div class="two">more...</div>
</div>
.one{
width:auto;
float:left;
border:thin red solid;
margin:5px;
}
.two{
float:right;
}
​DEMO