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>
Related
Here's what I am trying to accomplish...
"parent" has position:relative
"div 1-3" have position:absolute
However, whenever I do this, I find myself having to assign specific "top" values in my CSS. So div 1 might be top:50px, div 2 would be top:150px, and div 3 would be top:225px;
Is there a way to make sure the divs continue to stack inside the parent without assigning top values and/or absolute positioning?
A div should already display as a block and take up a full "row". Here is some HTML and CSS to give an example, compare it to your code:
http://jsfiddle.net/mWcWV/
<div id="parent">
<div class="child">Foo</div>
<div class="child">Bar</div>
<div class="child">Baz</div>
</div>
Should be straight:
HTML:
<div class="container">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
CSS:
.container {
position: relative;
width: 500px;
height: 500px;
background-color: #ffbf00;
}
.red {
background-color: #f00;
width: 200px;
height: 150px;
margin: 5px auto;
}
.blue {
background-color: #0f0;
width: 200px;
height: 150px;
margin: 5px auto;
}
.green {
background-color: #00f;
width: 200px;
height: 150px;
margin: 5px auto;
}
Check this fiddle.
In css file use...
div
{
display : block;
}
Which will give a break line for each div block and that feature is by default and don't use relative - absolute technique.
Div elements are block elements, which means that they will take a full row and that any element next to them will skip a line.
Just do:
<div></div>
<div></div>
<div></div>
If that does not work, you probably need to put them in display: inline-block;
Just remove absolute positioning. Center the divs using margin:auto and then provide whatever vertical margins you like.
You can give margin to inner div.
I want to set the width of divs to their contents and keep the divs under each other. Using display:inline-block effectively floats the divs next to each other. How can I do this?
Working jsFiddle Demo
Consider the following markup:
<div class="text">apple</div>
<div class="text">banana</div>
<div class="text">kiwi</div>
<div class="text">orange</div>
Float and clear all, here is the CSS:
.text {
background: yellow;
float: left;
margin-bottom: 3px;
clear: both;
}
Put clear: both on them this will keep them from floating, and yes you do need float "something"
#div1, #div2{
display: inline;
float: left;
clear: both;
border: 1px solid grey;
}
<div id="div1">some content here that is bigger</div>
<div id="div2">some content here</div>
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.
Having problem with the middle Div not expanding to the width http://acs.graphicsmayhem.com/images/middiv.jpg
Ok, how do I get the Middle div to expand to it's entirety?? I've been wrestling with this issue for hours now. Please can anyone help me?? I'm not going to use tables, I know this has to be possible.
Thanks.
Set a left and right margin equal to the left and right floated div + thos 5px gap you need in between.
That would be:
margin:0 205px;
and do not float the mid div. Place the right floated div in front of left floated, and the mid div as last in html (eliminates IE6 bug).
A lot has been written on the Simple, Ideal, Intuitive Three-Column Layout. This one is pretty good, and I've found it to be relatively easily modifiable, the two times I've used it: http://matthewjamestaylor.com/blog/perfect-3-column.htm
That ought to work:
width: 100%;
margin-left: 205px;
margin-right: 205px;
You also won't need floating on that div, then.
Not sure why you're floating the top div. Assuming:
<div id="container">
<div id="header">...</div>
<div id="content">
<div id="left">...</div>
<div id="main">...</div>
<div id="right">...</div>
</div>
</div>
ten:
#container { margin: 0 auto; /* fixed or floating width */ }
#header { margin: 5px; }
#container { overflow: auto; margin: 5px; }
#left { float: left; width: 200px; }
#right { float: right; width: 200px; }
#content { margin: 0 205px; }
This may sound weird but i have some css which aligns mys divs. In one place i also use http://www.brunildo.org/test/img_center.html which centers images.
Now i want my divs inside a larger div to go to another line if this one gets full. float: left seems to be the answer. The problem is it ruins my formatting. Including solution in the above link. I have this test code. If i remove the width and float it looks fine except it may take up too much space and not go to another line.
I was thinking i could use float on an outerdiv and center the image within. However float: left is still breaking it. I am hoping there is a way to remove the float so each div does go left but the div inside centers correctly not breaking my formatting.
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 200px;
height: 200px;
background: blue;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
div.c
{
background: red;
overflow: hidden;
min-width: 400px;
max-width: 400px;
}
div.c div
{
float: left;
}
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
<div class="c">
<div>
<div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
<div class="wraptocenter"><span></span><img src="a.jpg" alt="/a.jpg"></div>
</div></div></div>
regular old display:inline can be used on the images themselves (or a container div). this will let the items flow onto multiple lines depending on the width of the enclosing div.
to center the top-level div, something like margin: 0 auto should do it (if the parent has a width) or the good old <center> tag if not.