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/
Related
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.
I want to make two lines of divs. The divs are of different height. Like in the image bellow.
These divs are wordpress posts. They should go like this: first on the left, next one on the right, next one on the left etc.
Unfortunately, I can change only the style of the div that will contain the wordpress post. I cannot add html tags or make two columns in the html. So, can it be done only by styling the div element?
The divs don't have IDs,I have to get them with #container div{}
The only solution I found is this one:
div{float:left; width:345px; min-height:680px; max-height:680px;}
This works, but some of my divs are above 680px and they get on top of the others.
Assuming you want every other div pulled aside like this:
div:nth-child(2n+3) {
float:left;
}
div:nth-child(2n+4) {
float:right;
}
The +3 and +4 are assuming there are 3 divs before these you don't want to touch. This would need tweaking for your specific situation, but without seeing specific structure it's impossible to say anything for certain.
Try the following:
<div id="left-side">
<div class="pull-left">
</div>
<div class="pull-left">
</div>
<div class="pull-left">
</div>
</div>
<div id="right-side">
<div class="pull-left">
</div>
<div class="pull-left">
</div>
<div class="pull-left">
</div>
</div>
with the following CSS:
left-side {
float: left;
}
right-side {
float: right;
}
pull-left{
float: left;
}
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%; }
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.
<ul>
<li>
<div class="ext-left">
<img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
</div>
<div class="ext-right">
<a class="ext-name" href="#">Extension Name</a>
<p class="ext-intro">Introduction here</p>
</div>
</li>
...
</ul>
I'd like to split the each list element into two part(in the same line), in the left is an image, in the right is a link and a text(they should be in two lines).
I tried to use float left on ext-left but it doen't work.
Play with jsfiddle: http://jsfiddle.net/UeThn/1/
This is the correct version: http://jsfiddle.net/UeThn/10/
Add this CSS:
.ext-left{
float:left;
}
li{
clear:both;
}
New fiddle here
Here is what you do
<ul>
<li style="width:150px">
<div style="width:100px;float:left">
<img class="ext-icon" src="http://dummyimage.com/48x48/000/fff.png">
</div>
<div style="width:50px;float:right">
<a class="ext-name" href="#">Extension Name</a>
<p class="ext-intro">Introduction here</p>
</div>
<br clear="both"/>
</li>
The idea is as follows:
1. give the 'li' a width
2. give both div's a width
3. float left and right respectively
4. Add a beak with clear="both" at the end
How about this:
li > div{
display: inline-block;
}
[JSFiddle]
(But evil browsers won't support that, see info here)
Floating left seemd to work. Think you've done something wrong.
http://jsfiddle.net/UXnVJ/
You just need to give each div a set width - otherwise, they think they should be 100% wide, which doesn't allow the next to float next to it. See fiddle-fix here.
Try this:
li {
clear: left;
}
.ext-left {
float: left;
}
Float both divs to the left
.ext-left, .ext-right{
float: left;
}
li {
clear: both;
}