<body>
<div class="main-div">
<table id="gameboard-table"></table>
</div>
<div class="main-div">
Waiting for X players to join
<div> Player 1 - </div>
<div> Player 2 - </div>
<div> Player 3 - </div>
<div> Player 4 - </div>
</div>
</body>
The first div has a table that is being created dynamically, that second one is static.
I've tried to use
.main-div {
float: left;
}
but the divs are still one beneath the other.
Of course I didn't forget to include the CSS file in the html :)
How can I solve it?
thanks!!!
You need to set their width, because otherwise they just fill to 100%.
.main-div {
float: left;
width: 50%;
}
Your float-left should be on the child div's of main-div:
.main-div div {
float: left;
}
Check out this JSFiddle:
http://jsfiddle.net/Lqe7ug1L/
Note that the way your HTML is written now, the "Waiting for" text doesn't appear above them. You'll need to wrap that in a separate element so that it appears above the div's (I'm assuming that's the effect you're after).
Related
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 don't know much about html or css but I have done this much;
I want to stack divs so it looks like this (please excuse the bad drawing) ;
I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.
<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>
These are th three divs I have.
First one has links [the add/message etc]
Second one has "thelastgecko" and profile text.
And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.
You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".
I did write everything in text and readable since giving the code away doesn't teach as well.
But in case you still didn't get it, here's my idea:
<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>
Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.
You could do something like this: http://jsfiddle.net/jAKgd/
CSS
#wrapper {
width: 800px;
}
#leftColumn {
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
width: 100%;
}
#contentDislike,
#contentLike {
display: inline-block;
width: 250px;
}
Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.
HTML
<div id="wrapper">
<div id="leftColumn"> Link
Link
Link
Link
Link
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
It's a bad way of design to use floats to place divs at some place.
It's a much better way to use, for example, a flex layout.
But this is not supported by all browsers (But nearly. If you can, take this option).
Another solution is this one:
Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example
But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).
And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.
Hope I could help
I have two divs on a page with the same height position. I'm trying to make them expandable, allot like what goes on in the WordPress dashboard area:
Now i've got the left div to expand but only with the right div staying at the same width. I need both to expand on zooming in and out.
any ideas how this is done?
I've been looking it up for the past hour but i cant find anything.
A link to a tutorial would be cool (good luck finding one).
EDIT:
Here guys, i found something similar: http://jsfiddle.net/Khez/2zLPF/embedded/result/
do you see how the two divs side by side expand? the green and blue ones...
If you want your divs to dynamically change depending on the width of their container, set the widths using percentages:
HTML:
<div class="column">
<div class="wrapper">
<p>Text</p>
</div>
</div>
<div class="column">
<div class="wrapper">
<p>Text</p>
</div>
</div>
CSS:
.column {
float: left;
width: 50%; }
.column div { margin: 0 20px; /* Set the spacing between the cells */ }
Preview: http://jsfiddle.net/Wexcode/F7h2C/
NOTE: Because you are setting the combined widths of the columns to 100%, you cannot add padding to .column if you want them to be on the same line. The inner div wrapper will allow you to add spacing between your two columns. You should apply all background attributes to .wrapper.
It is a basic HTML question.
I have some div tags, which have some controls and occupy left half of my screem.
I Want to have a div tag to display some messages in the right side?
I used somthings like:
float = right;
in my css class. It didn't seem to work. What other properties I need to set.
Here is the code sample
<div class ="header_label">
#Html.GetLocalizedString("program_snapshotRecipientAdress") #Html.TextBox("txtRcpntAdress")
</div>
<div class ="header_label">
#Html.GetLocalizedString("program_snapshotUsertype1") #Html.RadioButton("Usertype", "One", new { id="rb1"})
#Html.GetLocalizedString("program_snapshotUsertype2") #Html.RadioButton("Usertype", "Two", new { id = "rb2" })
<div class ="commentsHeight"></div>
</div>
<div class ="header_label">
#Html.GetLocalizedString("program_snapshotDate") #Html.TextBox("SnapshotDate")
</div>
<div id ="CMSContent">
<div class ="CMS-message">
#Html.Raw("S=This is the div I need to place in the right hand side")
</div>
</div>
I didn't understand your question so much, but I'll try to answer.
If you have some div on the left and you want another one on the right you have two choice:
1) The first one is to set one div on the right and another on the left:
<div>
<div style="float: left; width: 50%">I'm on the left</div>
<div style="float: right; width: 50%">I'm on the right</div>
</div>
2) The second one is to set every div on the left
<div>
<div style="float: left; width: 50%">I'm on the left</div>
<div style="float: left; width: 50%">I'm on the second on the left</div>
</div>
Are you sure that you named the div correctly?
the correct way to your command is
float : right;
If you want your div to be half of your screen you should write something like:
width : 50%;
You can make a div occupy the right hand side of the screen in a multitude of ways, one of which is 'floating' as you've found.
This takes the element out of the normal 'flow' of the document and allows it to occupy a different area of the screen depending on parent elements etc.
At a glance you would need to write:
float: right;
In your CSS, rather than = but if you could post some html and css in a more full form, some better advice can be provided.
if you want to show your form or something in two halfs or grids use this:
float: right;
width: 50%;
I always seems to get this simple HTML stuff wrong. I am currently trying to add side by side divs in the middle of a page on this test page I made:
http://www.comehike.com/hiking_dev.php
The code I added was something like this:
<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>
I added <strong> tags so you can spot it on the page better.
But do you see there is text that appears there that reads like this "When considering the injury risk of any" - but that text is in the <p> tag below. Why is it appearing there?
Is it better practice to wrap my 2 divs that I am trying to align, within another div?
After your two floating divs, add another empty div...
<div style="clear:both;"></div>
This will cause the two floating divs to push all subsequent content below them. As you have it now, there is 200 pixels of empty space after the first div allowing the other content to simply wrap around it.
Increasing the width of the floating divs may not be desirable for your layout so clear:both; is most typical for this situation.
Surround those two divs in a parent div with overflow set to hidden.
<div style="overflow:hidden;">
<div style="width: 460px; float: left; ">
<strong>Test hello</strong>
</div>
<div style="width: 300px; float: right; ">
<strong>Test hello 2</strong>
</div>
</div>
An alternative (as others have pointed out) is to use a third element:
<div style="clear:both;"></div>
It's debatable as to which is better. Usually, either is just fine. Here's a post about the topic:
Floated Child Elements: overflow:hidden or clear:both?
You'll either need to add a div below your two divs with clear:both; as others have suggested, or you could add clear:both; to the following <p> element.
Because you have an entire page width of 960px. You're combined div widths are 760px (400+300). If you add 200px to the second div you should be fine.
Edit: Because of padding, you can increase either of the divs by 150px and be fine.