I'm trying to fit three images inside a div, but I'm having trouble getting them to align properly. This is what I have in mind:
alt text http://img245.imageshack.us/img245/2016/divsf.jpg
But I can't for the life of me figure this one out. Can anyone please lend a hand? Thanks!
http://jsfiddle.net/tMxkX/2/
CSS
div#container {
width:400px;
height: 400px;
padding:50px;
background: red;
}
div.leftbox {
float: left;
width:175px;
height: 175px;
margin-bottom: 50px;
background: blue;
}
div.rightbox {
float: right;
width: 175px;
height: 400px;
background: yellow;
}
HTML
<div id="container">
<div class="rightbox">
Right Image Box
</div>
<div class="leftbox">
Left Image Box Top
</div>
<div class="leftbox">
Left Image Box Bottom
</div>
</div>
If changing markup is allowed, I propose to wrap img 1 and 2 in another div - then it is just a matter of floating the div to the left.
Related
How can I float an image left of a div, and maintain that the div aligns bottom with the logo?
I swear I've done this before. I can't figure out how I did it though.
See example here
Why float at all? Just using display: inline-block should inherently give you the behavior looking for. Example: https://jsfiddle.net/8sj12do1/
.logo{
width: 200px;
height: 200px;
display: inline-block;
background: red;
}
.link{
display: inline;
}
<div class="logo"></div>
<div class="link">Hi</div>
<div class="link">Hi</div>
<div class="link">Hi</div>
How do I align the red box with the gray box vertically?
http://jsfiddle.net/sLZzK/1/
I need several box combinations like that on my page, which is why I cannot simply push the red box up manually. A negative margin won't work either, since I do not know in advance how much content will be in the gray box. And the red box must overlap other page content, hence the absolute positioning. (http://jsfiddle.net/xMm82/)
CSS:
body {
padding: 0;
margin: 10px;
}
.left_div {
margin-bottom: 10px;
width: 300px;
height: 70px;
border: 1px solid gray;
}
.right_div {
position: absolute;
border: 1px solid red;
left: 311px;
width: 200px;
height: 200px;
}
HTML:
<div class="left_div">gray box
<div class="right_div">red box</div>
</div>
Why are you using absolute positioning for such structure? In the case the better solution is to use float: left for each div. If you want to have two divs aligned vertically use display: table-cell rule. Here it is:
FIDDLE
UPDATE: Try to use this:
FIDDLE
what I've understood is you want gray box on top of Red box:
first of all wrap them in a parent div.
set the width of wrapper to desirable width.
set width to 100%(both red and gray) and you are done !! (fiddle)
If you want to arrange them horizontally:
left_div will be wrapper
it will contain 2 child div's
left one will have content and right one will be red box.(fiddle)
I would do it this way:
HTML:
<div class="container">
<div class="left_div">gray box</div>
<div class="right_div yellow">red box</div>
<div class="clr"></div>
</div>
CSS:
.container:not(:last-child){margin-bottom: 10px;}
.left_div,.right_div{float:left;}
.clr{clear:both;}
Fiddle here.
use float to arrange vertically and clear:both to prevent any errors
here's the corrected one
.left{
float:left;
width: 300px;
}
.right{
float:left;
width: 200px;
}
.left_div {
width: 300px;
height: 70px;
border: 1px solid gray;
}
.right_div {
border: 1px solid red;
width: 200px;
height: 200px;
}
<div class="left">
<div class="left_div">
</div>
</div>
<div class="right">
<div class="right_div">
</div>
</div>
<div style="clear:both"></div>
http://jsfiddle.net/sLZzK/8/
There you go: http://jsfiddle.net/sLZzK/14/
HTML:
<div class="wrapper">
<div class="left_div">gray box</div>
<div class="right_div">red box</div>
</div>
CSS:
.wrapper {
border: 1px solid #369;
padding: 10px;
}
.wrapper > div {
display: inline-block;
vertical-align: middle;
}
You might also want to read about flexbox which will give you a similar and more consistent result, however it's not fully supported on various browsers yet.
I am using <div> to create a horizontal bar across the screen. Within that horizontal bar, I have 3 more <div> each of a different width. They are supposed to be all in a row horizontally next to each other. Instead, they are on top of each other. How do I fix this?
Also, if I don't have any text within the <div> in my HTML code, the <div> does not appear. Ex: <div>anything</div>
JSFiddle
You can add css float:left to div and If you also don't want any text in div you should add css height to div.
.horizon div{
float: left;
height: 20px;
}
like this http://jsfiddle.net/KG5B3/
Just use a float, which IS cross-browser compliant. Also you should clear your floats which can be seen on the updated JsFiddle
.horizon div{
float: left;
}
Fiddle
You can float those inner DIVs. You can also use inline-block (not shown).
<div class="horizon">
<div class="left">left</div>
<div class="mid">middle</div>
<div class="right">right</div>
<br style="clear: both" />
</div>
body {
margin: 0;
}
.horizon {
background: #000000;
width: 100%;
}
div.horizon div {
float: left;
}
.right {
width: 25%;
background: #ff0000;
}
.mid {
width: 50%;
background: #00ff00;
}
.left {
width: 25%;
background: #0000ff;
}
I know this is kind of a stupid doubt about floating CSS layout, but I can't find the answer anywhere.
I want to have a simple page, with a big red reactangle in the middle, and 2 blue squares within, one on each side of the rectagle.
I have the following HTML code:
<body>
<div id="rectangle">
<div id="left"></div>
<div id="right></div>
</div>
</body>
and then I have this css:
#rectangle {
width: 600px;
margin: auto;
padding: 50px;
background-color: red;
}
#left {
float: left;
width: 250px;
height: 250px;
background-color: blue;
}
#right {
float: right;
width: 250px;
height: 250px;
background-color: blue;
}
And this doesn't work, because the red rectangle doesn't adapt its height to cover the blue squares because they are floating I guess...
The only way I know to solve this is adding a new
<div id="footer"></div>
at the end of the rectangle div, with style
clear: both;
and I'm sure there should be a more elegant way to do this, isn't there?
Simply add overflow: auto to the #rectangle div.
Example: http://jsfiddle.net/ZVJQN/
add clear div
<div id="rectangle">
<div id="right"></div>
<div id="left"></div>
<div class="clear"></div>
</div>
.clear
{
clear:both;
}
I am having a problem with what i think is my style sheet. My site page seems to be set up fine:
However, when i view it in a browser the middle document is out of line:
Could there be anything causing this to happen? it leads me to think maybe something in my css file is? But what? :(
My css file is as follows:
div.left
{
float: left;
width: 15%;
background-color: white;
}
div.right
{
float: right;
width: 40%;
background-color: white;
}
div.center
{
float: left;
width: auto;
background-color: white;
text-align:center;
}
That's most probably due to your floating elements and since the center div is not floated at all, but rather "pushed" to the middle by the float:left of the left div.
If your div's in the html are like:
<div class="parent_div">
<div class="left"> left </div>
<div class="center"> center</div>
<div class="right"> right</div>
</div>
Try floating the center div to the left also, and it should do the trick
div.center
{
float: left;
width: auto;
background-color: white;
}