Two divs will not float beside eachother - html

I'm not sure where I am falling short but I cannot figure out why my two divs will not float beside one another.
I created a jsfiddle here: http://jsfiddle.net/Q3XUy/
<body>
<div class="container">
<div class="nav">
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="contentImage">
<img src="RD.png" />
</div>
<div class="content">
<p>
Pinterest Banksy 90's organic salvia....
</p>
</div>
</div>
</body>
Thank you!

The padding-right that you have on one of your divs is making them add up to more than 100% and wrap. You can do it different ways, like putting a smaller div inside the 50% div causing the trouble.

Sometimes when you set a width in percentages, the browser will interpret that as a number greater than 100% and wrap. Also, any added padding will trigger it.
Consider:
.contentImage {
width: 49.5%;
padding: 0;
}
.content { width: 49.5%; }

Related

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.

Absolute div placed on top of div

I'll do my best to explain the issue. I created a fiddle with the code. https://jsfiddle.net/caoz7sn2/
I'm trying to place a div on top of a div which I accomplished, but the issue is when you resize the screen, the div with the position:absolute doesn't move relatively with the others which is obvious because it's set absolute.
<!DOCTYPE html>
<html>
<head>
<title>404Vanity</title>
<script src="http://localhost:35729/livereload.js"></script>
</head>
<body>
<div class="header">
<img class="logo" src="images/logo.svg">
<div class="navbar">
<ul>
<li>Work</li>
<li>Vision </li>
<li>Contact </li>
</ul>
</div>
<div class="goldbar"></div>
</div>
<div class="itemList">
<div class="item">
<img src="images/shopashop.png">
<div class="overlay"></div>
<div class="title"><h2>Shopashop</h2></div>
</div>
</div>
<script src="bundle.js"></script>
</body>
</html>
the div class="itemList" is suppose to be placed exactly on top of the goldbar div.
I'm not too sure if this is exactly what your going for. But the reason that the divs aren't lining up right is because the gold bar has that margin: 0 auto. That's telling it to always remain centered on the page.
Then you have your .itemlist, which is being told to be positioned 30% from the left of the page at all times, regardless of browser width.
If your trying to center your itemlist, I would doleft: 0; right: 0; margin: 0 auto; on the absolute elements.
Fiddle: https://jsfiddle.net/caoz7sn2/2/

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.

CSS Floating / Centre combined responsive design issue

I have a footer that has 3 elements within it as follows:
<div class="footer">
<div class ="jumperMenu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class ="logo">
<img src="#"/>
</div>
<div class ="navJumpMenu">
<ul>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</div>
The footer div needs to have a max width of 1600px,i need the JumperMenu to stick to the left of the footer, logo to be in the centre and navJumpMenu to stick to the right, right and left elements need 10px padding..
All is fine with floats - The issue I have is that I need all the elements to also move within their positions on smaller screens - so say the screen was only 1200px i need the 3 elements to stick to their respective layout positions but adjust to fit within the screen size.
Does anyone have any idea at how to accomplish this with pure CSS - so I dont have to resort to a jquery positioning?
Cheers
http://jsfiddle.net/calder12/KjG8v/1/
.footer{max-width:1600px; margin:0 auto;text-align:center;}
.jumperMenu{float:left;}
.navJumpMenu{float:right;}
.logo{margin:0 auto;}​
You'd probably want to set a minimum width on the footer container too to make sure the 3 elements don't actually run over each other, but I think that's what you want isn't it?
Is this what you are looking for?
#footer {
display: inline-block;
max-width: 1600px;
min-width: <your min width>;
text-align: center;
}
#footer>* {display: inline-block;text-align: left;}
#footer #navJumpMenu{float:right;}
#footer #jumperMenu{float:left;}
Hope that helps.

CSS 2 column page with float not working

I've read through the many articles here on CSS Float but still can't get my simple example to work. I'm trying to get 2 columns on my page using this html:
<div id="mainContent" style="clear: both;">
<div id="categoryColumn" >
<h1 >
Recipe Categories
</h1>
<ul>
<li>cat1</li>
<li>cat2</li>
<li>cat3</li>
</ul>
</div>
<div id="menuColumn">
<h1>
Weekly Menus
</h1>
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
</div>
and this CSS
#categoryColumn
{
background-color: yellow;
width: 500px;
float: left;
}
#menuColumn
{
background-color: red;
width: 500px;
}
I know the divs are being recognized because the colors are correct, but the two lists are appearing on top of each other, not side by side. I want to top column (categoryColumn) on the left, and the bottom one on the right. Am I using the float wrong?
float needs to put on menuColumn as well.
add float:left to #menuColumn - see http://jsfiddle.net/UjLeK/
Hey Brad Irby need to float both div each other, Just check it... http://jsfiddle.net/mnuVB/