a have three column layout and i want to have three divs inside the middle column, but every time my content in sidebars is "longer" than content in the middle div, boxes just jump down under "the longest div". Here is my code:
<div style="float: left; width: 15%; background-color: yellow;">
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div style="float: right; width: 15%; background-color: pink;">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
<div style="margin-left: 20%; margin-right: 20%;">
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="clear: both;"></div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="clear: both;"></div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
middle
</div>
Here is code on jsfiddle for better understanding. I would be glad if somebody could explain "clearing" to me.
Edit:
I followed this tutorial http://css.maxdesign.com.au/floatutorial/tutorial0406.htm
Your middle div is being presented as a block level element and is why is being pushed along with the content of your sidebar divs. Float it to the left and add a proper width to it to fix the issue. Middle div width = 20% + 20% margin + 15% + 15% sidebar widths = 70% + 30% middle div = 100%.
http://jsfiddle.net/DyHGP/5/
It's because of the following, which you have after every three divs.
<div style="clear: both;"></div>
Clearing is used to drop an elementy right under anything that is float. Using clear: both; means that it will clear anything that is floated left or right.
A quick fix would be to remove those elements and increase the width of each of the divs in the centre column to 30% which would then force the 4th one onto the next line.
Related
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
I'm trying to convert my website from table layout to div layout,
while with the table layout everything was more intuaitive, I get stuck every minute with this div layout, here's my current problem -
I want the text in my left div to be padded from the left and from the top.
If I pad the left DIV itself, the whole div gets expanded (even though the container div has a 700px width defined for it); If I try to margin the text itself, for some reason it only works for creating the left margin, but it doesn't effect the top margin which stays at 0px.
here's my code:
<div id="container">
<div id="left">I want some padding here
<div id="image">image</div>
</div>
<div id="middle"></div>
<div id="right">
<div id="text">Text</div>
</div>
<br style="clear: left;" />
</div>
CSS:
#container {
border: 1px solid #DCD7D4;
width: 700px;
min-height: 680px;
position: relative;
margin-left: auto;
margin-right: auto;
}
#left {
float:left;
width: 500px;
min-height: 680px;
background-color: #F6F1ED;
}
#left #image {
position: absolute;
left: 27px;
bottom: 40px;
background: green;
width: 375px;
height: 48px;
}
#right {
float: left;
width: 194px;
min-height: 680px;
background-color: #F2EEEF;
}
#right #text {
position: absolute;
left: 523px;
top: 154px;
background: yellow;
width: 150px;
height: 70px;
}
#middle {
float:left;
background: #0C9;
background-image:url(midbg.png);
width: 6px;
min-height: 680px;
}
You can add padding to your #left div together with box-sizing: border-box and the layout should remain in tact
#left
{
padding: x px;
-moz-box-sizing: border-box;
box-sizing: border-box
}
Read up on the CSS box model here: http://css-tricks.com/the-css-box-model/
Padding will affect your overall element's specs.
ALSO, this is a great trick for dealing with funky padding of various elements:
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
How about either of these solutions. They work on my browser:
<div id="container">
<div id="left"><span style="padding-left: 10px; padding-top: 10px">I want some padding here</span>
<div id="image">image</div>
</div>
<div id="middle"></div>
<div id="right">
<div id="text">Text</div>
</div>
<br style="clear: left;" />
</div>
OR
<div id="container">
<div id="left"><div style="padding-left: 10px; padding-top: 10px">I want some padding here</div>
<div id="image">image</div>
</div>
<div id="middle"></div>
<div id="right">
<div id="text">Text</div>
</div>
<br style="clear: left;" />
</div>
if border-box is not working then span should work for you, check this demo
CSS
#left > span {
padding:100px;
position:absolute;
height:100%;
border:1px solid #000;
}
HTML
<div id="left">
<span>I want some padding here</span>
<!-- rest of html -->
`
EDIT
Since, your #left has child divs inside, you can not apply padding option to it.
padding is required on text directly under #left id and not a child div,so, span is suggested as <span> is an inline element and <div> is block level element.
I'm having an issue with stretching div A based on the height of div B, OR stretching div B based on the heigt of div A (depends which has the most content).
I tried looking into faux columns, but as my divs aren't in the same 'holder' this can't work... My current code looks like this:
<div id="header">
<div id="content">CONTENT HEADER</div>
</div>
<div id="content">
<div id="column-left">
<p>INHOUD LINKER KOLOM</p>
<p> </p>
</div>
<div id="column-right">
<p>INHOUD RECHTER KOLOM</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="clear"></div>
</div>
<div id="main">
<div id="content">
<div id="main-content">
<p>HOOFD INHOUD </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<div id="content">CONTENT FOOTER</div>
</div>
With as CSS the following:
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.clear {
clear: both;
}
#content {
position: relative;
width: 950px;
margin-left: auto;
margin-right: auto;
z-index: 10
}
#header {
position: relative;
min-width: 990px;
width: 100%;
height: 90px;
background-color: #F00;
}
#column-left {
width: 500px;
float: left;
background-color: #0F0;
}
#column-right {
width: 450px;
float: right;
background-color: #00F;
position: absolute;
margin-left: 500px;
}
#main {
min-width: 990px;
width: 100%;
background-color: #FF0;
}
#main-content {
width: 500px;
float: left;
}
#footer {
min-width: 990px;
width: 100%;
height: 90px;
background-color: #F00;
}
In my example you will see that I made the 'blue' div's content longer whereas I would like to have the 'yellow' div to stretch (so the footer will be below them both)
The other way around would also be applicable (if the 'yellow' div would contain more content, the 'blue' div should stretch... Although this can be solved with faux columns if I give a 'yellow-blue' image as background to the 'blue' div).
An example as image: http://tinypic.com/view.php?pic=jjpx0k&s=6
Can someone help me with this?
Any help would be much appreciated!
I looked at your code and you really can't achieve what you want to do because the blue div is in absolute.
The only way of doing this is by using jquery and detecting the height of the blue div and then adding margin or height to the yellow div to make the space so that the footer appears to be under the blue div...
I hope this helps.
How would you center position two divs inside a container when one is 'dynamic'? That is, the search input in content-top-search changes width from 226 to 462 when you click inside it.
Here's my CSS code:
.content-top-buttonsearch-holder {
text-align: center;
float: left;
width: 816px;
margin-left: 15px;
}
.content-top-buttons {
height: 31px;
width: 269px;
float: left;
margin-right: 16px;
}
.content-top-search {
height: 31px;
float: left;
}
Here is my HTML:
<div class="content-top-buttonsearch-holder">
<div class="content-top-buttons">
<a id="all_events_button" href="#" title="Click to show all events happening!"></a>
<a id="all_venues_button" href="#" title="Click to show all venues in our database!"></a>
<a id="event_finder_button" href="#" title="Click to search for events!"></a>
</div>
<div class="content-top-search">
<input name="venue-search" class="searchbox" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'sort parties by venue name':this.value;" value="sort parties by venue name" />
</div>
</div>
<div style="border: 1px solid green; margin: 10px;">
<div style="margin: 10px auto; width: 50%; border: 1px solid red; text-align:right">center 1</div>
<div style="margin: 10px auto; width: 80%; border: 1px solid magenta; text-align:left;">center 2</div>
</div>
what's really the 'magic' is the margin-left|right: auto in the inner divs. Also they have to have a width.
edit
This will not work with floats
edit2
Try disabling the float on .content-top-search Maybe that is what you want.
edit3
http://jsbin.com/ukuqas/5 has another solution
there you have a outer container with text-align: center and an inner container with display: inline-block This inner container containes the buttons and the search box. All float is prohibited.
I am attaching my HTML and CSS hoping that someone can help me. Basically I have a right sidebar div where the content will not push to the top. When I play around with position and height properties, the content just floats all over the page and doesn't even stay in the right sidebar. I hope someone can point me in the right direction, I have looked at numerous posts and nothing I try seems to work.
HTML:
<div id="container">
<div id="head">
</div>
<div id="menuTop">
</div>
<div id="content">
</div>
<div id="sidebar">
</div>
<div id="footer">
</div>
</div>
CSS:
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 250px;
}
CSS Box Model 101 - the actual width of a div (or any element) is width + padding + borders
So your two floated divs add up to 1001px
the content div # 750px + 1px border is actually 751px wide, make it's width 749px and all should be well
#container {
margin: 0 auto;
width: 1000px;
background: url("bgbg.jpg");
border: 10px solid #000;
}
#content {
float: left;
width: 750px;
padding: 0;
background: url("bgbg.jpg");
border-right: 1px dashed #fff;
display:block;
}
#sidebar {
float: right;
background: url("bgbg.jpg");
width: 200px;
}
<div id="container">
<div id="head">head
</div>
<div id="menuTop">
</div>
<div id="content">ssss
</div>
<div id="sidebar">ffff
</div>
<br style="clear:both;" />
<div id="footer">
</div>
</div>