I have the following HTML:
<div id="body">
<div id="left">xx</div>
<div id="right">yy
aa
<br>
<br>
<br>
aa
</div>
</div>
and the following CSS:
#body { background-color: yellow; }
#left, #right { float: left; }
#left { background-color: blue; }
#right { background-color: red; }
What I need is for the DIV on the left to grow to be the same length as the one on the right? Is this possible? I tried a few things but it doesn't work.
fiddle
There are numerous way to try it. You didn't assign either of them a height so they won't be doing much at the moment. If you add equal heights, they can be the same. You can try style="height:100%;" for both of them
Or add that to those IDs in your CSS, or make a class with it and assign that to your divs.
something like this $("#right").css("height", $("#left").css("height"));
Here's a way about it, using display: table-cell
Won't work in older browsers.
http://jsfiddle.net/ZrGBB/
You could having the right inside the left as so
<div class="left">
aa
<div class="right">
bb
<br/>
<br/>
bb
</div>
<div style="clear:both"></div>
</div>
and floating the right div right and stoppnig the left colapsing using the clear:both
There's no real simple one line of code way to do this but there are many solutions out on the web like Faux Columns or Equal Height Columns.
Give it a Google and find a solution that works best for you.
Related
I have more than 6 divs and I want to set it with float left and one after another with auto resize as per the content size using css
As per image below
here is my code:
<div class="main-container">
<div class="container">
<div class="title">test1</div>
<div class="content">Testing of css html Long Content</div>
</div>
<div class="container">
<div class="title">test2</div>
<div class="content">Testing of css html Long Content</div>
</div>
<div class="container">
<div class="title">test3</div>
<div class="content">Testing of css html Short Content</div>
</div> <!-- And so on ... -->
</div>
any help will be appriciate. Thanks
You should use JQuery plugins like wookmark or masonry for what is you expected output. Using CSS you can not fill upper space.
You can also try http://suprb.com/apps/gridalicious/ which is very good using JQuery.
From all I know, you cannot achieve that using CSS only. The following CSS solutions are possible, but each of them fails to meet all your requirements.
float: left; with clearing
This is all you can achieve using float:
For that to work, you have to clear the float every 4th element. Recommendation is to use
.container:nth-of-type(3n+1) { clear: both; }
display: flex;
What you can achieve using display: flex; is similar, but all .container in one "row" will have the same height which will be determined by the "highest" .container.
CSS columns
The only way I know of to create a type of layout like you showed is using css colums. This does have the massive drawback that your containers will be stacked first in vertical order, and only if a column is filled the next .container will be pushed to the next column. So 2 will be below 1, not right of it.
Javascript-based solutions
As mentioned in another answer, there's a load of solutions available based on Javascript.
Find the two mentioned before here:
http://masonry.desandro.com/
http://www.wookmark.com/jquery-plugin
Add this style:
<style>
.main-container{
border:solid green 1px;
width: 500px;
height:200px;
}
.container{
border:solid gray 1px;
width:50px;
height:auto;
float:left;
}
</style>
By using height /width = auto can make your div flexible to its content as per your hint
hope this help.
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;
}
<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).
Let's say I have 2 divs within a wrapper side by side.
<div id="wrapper">
<div id="primary"></div>
<div id="secondary"></div>
</div>
#primary {
width:50%;
float: left;
}
#secondary {
width: 50%;
}
How can I make sure div secondary always has the same height as div primary
try using javascript taking the value of the primary div an assignment at the second div.
The other way is trying the use pixel px or em, this way you ensure always has the same height both
There's a pretty cool trick on how to do this.
jsFiddle Demo
First, you apply padding-bottom: 100%; to each side-by-side div.
Next, you apply margin-bottom: -100%; to each side-by-side div. Note the -
Finally, you add overflow:hidden; to the div they are inside.
Presto! True happiness is yours.
HTML:
<div id="wrapper">
<div id="primary">Lorem ipsum dolor set amet. </div>
<div id="secondary">En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. En arche yn ho logos. Kai ho logos yn pros ton theon. Kai theon yn ho logos. </div>
</div>
CSS:
#wrapper {overflow:hidden;}
#primary {width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;}
#secondary{width:50%; float:left; padding-bottom:100%; margin-bottom:-100%;}
References:
http://www.ejeliot.com/blog/61
If you specify the height value for their container let say #wrapper {height:300px;}, you can just set the the #primary and the #secondary height value to 100%. But if you don't want to specify any height value then you can use display:table option like in the example here http://jsfiddle.net/qiqiabaziz/LFEF5/
Your CSS
.table{display:table;width:99.98%;margin:0 auto;padding:0 0.01% 0 0.01%;border-collapse:separate;border-spacing:5px;}
.row{display:table-row;}
.cell{display:table-cell;text-align:center;width:50%;}
Your HTML
<body>
<div class="table">
<div class="row">
<div class="cell">content for this div
</div>
<div class="cell">content for this div
</div>
</div>
</div>
</body>
Unfortunately there is no perfect method to do this without using Javascript as realistically the two divs know nothing about one another.
What your options are depends on what exactly you were looking to achieve visually.
A quick google search brought this up which looks quite promising: http://www.vanseodesign.com/css/equal-height-columns/
If you can focus on more modern browsers you may be able to get away with using flexbox. See this post for examples etc: http://css-tricks.com/fluid-width-equal-height-columns/
Make the two divs of equal height (either by declaring their heights in px, em or %) and declare their overflow : auto, so if content in any or both divs increases, scroll is provided automatically and their heights do not get disturbed.
just make sure the parent div (div wrapper) has a width in pixel
<div id="wrapper">
<div id="primary"></div>
<div id="secondary"></div>
</div>
#wrapper {
width:300px;
}
#primary {
width:50%;
float: left;
}
#secondary {
width: 50%;
}
this will work, unless div primary has margin and/or padding
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