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

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.

Related

Trouble positioning bootstrap/ CSS element

I'm new at coding and have a problem. I'm working on a project and it has to be done mostly in Bootstrap, although I added some css. I want it to look like:
informational bullets down left IMAGE in center, Informational bullets on right. So bullets, image, bullets.
I believe I have the left side ok and the image is perfectly centered where I want it to be, but the right side is NOT cooperating at all. No matter what I've tried, it keeps remaining at the bottom right of the image instead of starting at top of image on the right hand side.
I've tried using p tag then enclosed it in a div, then got rid of p tag and only used a div. I've tried styling it all kinds of ways.... display: inline-block, position:center, I tried messing with the margins, I tried using bootstraps' text-center in the opening tags, I've tirelessly searched YouTube. I don't know how to make this look the way I want it to look. Again, an image centered and bulleted text going down each side of image.
.bottom {
}
img {
border: 20px inset gray;
width: 500px;
display: block;
margin: 0 auto;
}
.bullet {
}
.bullet2 {
display:inline-block;
margin-left: 850px;
margin-bottom:-300px;
}
<div class="container bg-primary">
<div class="row">
<div class="col-md-12 col-xs-12">
<h1 class="text-center text-white">Water</h1>
<h2 class="text-center text-white"><em>Where there is no water, there is no life</em></h2>
</div><!--end col12-->
</div><!--end row-->
<div class="body">
<div class="bullet text-white">This is a cool and informative paragraph</div>
<img class="img-responsive" src="https://i.pinimg.com/736x/d6/69/fd/d669fd1ff1deecff0644292b02fe5a7d--charity-water-water-sources.jpg" alt="boy happy with water"/>
<div class="bullet2 text-white">This is a cool and informative paragraph</div>
</div><!--body-->
</div><!--end container-->
It looks like you're using Bootstrap.
If I understood correctly, this markup schema should do it:
container
row
col-sm-4
bullets
col-sm-4
img-responsive
col-sm-4
bullets
Depending on version of Bootstrap and where you want this to break (responsive-wise), you might have to change col-sm-4 to other Bootstrap grid classes.
Documentation: v3. v4.
And a working example, using v3.3.7:
/* you don't actually need this CSS, it's just for SO */
body { margin: 0; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul>
<li>A bullet</li>
<li>Another bullet</li>
<li>...</li>
</ul>
</div>
<div class="col-sm-4">
<img class="img-responsive" src="https://i.pinimg.com/736x/d6/69/fd/d669fd1ff1deecff0644292b02fe5a7d--charity-water-water-sources.jpg" alt="boy happy with water" />
</div>
<div class="col-sm-4">
<ul>
<li>A bullet</li>
<li>Another bullet</li>
<li>...</li>
</ul>
</div>
</div>
</div>

Margin on inline pic moving every other object

I have the following Code. All elements should be in the same line in my header, so I've put them all to inline-blocks.
Now they all move down a bit because of the height of the picture.
If I move down the picture a bit with margin or padding the whole line moves down.
What would be the best approach to keep everything in a line and have the center of the picture be inline and not at the bottom as it is now?
<header>
<div id="headerBox">
<h1>hi</h1>
<p>hello<span>/</span> Pw <span>(ID123)</span></p>
<img src="plus.png" id="plus" />
<span id="kunden">Kunden/Projekt anlegen</span>
<input type="text" />
<img src="girl.png" id="girl">
<div id="navArrows">
<ul>
<li>Projektübersicht</li>
<li>Konfigurieren</li>
<li>Ergebnisse</li>
<li>Landingpage</li>
<li>Prüfen</li>
</ul>
</div>
</div>
</header>
To achieve this layout, one can use an unordered list with the CSS display property on each item set to inline-block.
<ul class="box">
<li>
<a href="#">
<img src="plus.png">
<h4>Your text</h4>
<p>Your text</p>
</a>
</li>
<li>
<a href="#">
<img src="girl.png">
<h4>Your text</h4>
<p>Your text</p>
</a>
</li><!-- more list items -->
</ul>
When the items have different heights, you’ll see some strange stacking issues. (The second item may be taller or shorter. With floats that fifth item catches on it.)
Instead of float, I give each list item a width and change the display from block to inline-block.
ul.box li {
width: 200px;
display: inline-block;
}
For more information about this styling, this tutorial may help:
http://blog.teamtreehouse.com/using-inline-block-to-display-a-product-grid-view
Hope this helps!
The solution to my Problem was the css attribute
vertical-align: text-top;
on the picture.
More about it here http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Alignment issue of div in HTML

I have a jquery ui calender that i have placed at left of the page.After calender i have placed second div which is taking full width of the web page.Now i want to add one more div just below the calender but its coming after the second div ..
Here is the link of the image ..
Please see the web page
Here is my HTML..
<div id="datepicker" style="float:left;"></div>
<div id="main" style="float: left; width:83%; margin-left:5px; margin-top:0px;">
<div id="doclist">
<h2>Documents</h2>
<ul id="documents">
<li>Document1</li>
<li>Document2</li>
<li>Document3</li>
<li>Document4</li>
<li>Document5</li>
</ul>
</div>
<div id="wrapper">
<ul id="tabs">
<!-- Tabs go here -->
</ul>
<div id="content">
<!-- Tab content goes here -->
</div>
</div>
</div>
<div id="links" style="float:left; margin-left:0px">
<label name="roomOperation" id="roomOperation" style="font-style:normal; font-size:12px;font-weight:bold;"> Room Operation </label>
<br/><br/>
<li>Check in List</li>
<br/>
<li>Check out List</li>
<br/>
</div>
Why is this happening..
Please help me to remove the margin between calender and my hyperlink menu..
If you use position: absolute; on the #links div, and set the CSS top: ; value to the same height as your calendar, plus whatever you want as a gap between the two, say 5px, and the left: 0px; this should work.
You'll also need to surround all 3 divs with a containing div with CSS position: relative to make the absolute positioned div keep within the boundaries of the area you want it to be in.
I also believe you could use float: right; on the documents div and float: left; on the other two, but I'm not 100% sure on this, it's worth a try though.

Div element next to another div elemnt

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

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