Need help getting two divs to align beside each other, one contains 2 pictures, the other a video.
HTML
<img src="example3.png" alt="CopeLogo" height="200" width="200" class="exlogo" >
</div>
</div>
CSS
#pics{
text-align: center;
background-color: #194b6f;
height: 200px;
width: 500px;
float: left;
border-radius: 5px;
margin-left: 50px;
border: 2px dashed black;}
#vid{
text-align: center;
background-color: #194b6f;
height: 490px;
width: 660px;
float: right;
border-radius: 5px;
border: 2px dashed black;
margin-right: 50px;}
just use float:left; for both, also you can use display:inline-block; for both as well if you don't want to use float.
I get your point but please do add your working codes to be more clear in your question.
You can actually do this:
HTML
<div class="header">
<div class="pic">
<img src="http://placehold.it/150x150" alt="">
<img src="http://placehold.it/150x150" alt="">
</div>
<div class="vid">
<img src="http://placehold.it/400x150" alt="">
</div>
</div>
CSS:
.header {
display: inline-block;
width: 100%;
border: 1px solid #ccc;
}
.vid {
float: right;
}
.pic {
float: left;
}
Working fiddle
Think of it this way: use DIVs to group each entity that you want to float:left.
You want to align the two images, so put each into a div, and float those divs left.
You want to align the box containing the two images with the box containing the video. Float each of those left.
When you use float:left (or right), the floated DIV is removed from the HTML "flow" and therefore has zero height. Therefore, the DIV containing a floated DIV (or other element) has zero height. Not good. To fix that, apply the clearfix hack to the parent div.
Here is a better explanation (although it uses a different method to clear the floats -- both methods work fine): Customising Insightly HTML contact form (aligned, spaced fields)
/* CSS: */
body{min-width:650px;min-height:650px;}
#pics{float:left;border-radius:5px;XXXmargin-left:50px;border:2px dashed black;}
#picLeft {float:left;height:200px;width:200px;}
#picRight{float:left;height:200px;width:200px;}
#vid{float:left;height:200px;width:200px;border-radius: 5px;border:2px dashed black;}
.clearfix:after{content:"";clear:both;display:block;}
<!-- HTML: -->
<div id="container" class="clearfix">
<div id="pics" class="clearfix">
<div id="picLeft">
<img src="http://placekitten.com/200/200" alt="MyLogo" height="200" width="200" class="mainlogo">
</div>
<div id="picRight">
<img src="http://placekitten.com/195/195" alt="CopeLogo" height="200" width="200" class="exlogo" >
</div>
</div>
<div id="vid">
<iframe src="https://www.youtube.com/watch?v=8E8xMcXmI9E" width="195"></iframe>
</div>
</div>
Additional References:
CSS-Tricks: Clearfix hack
Another example
Ahmed Alaa's answer also has a good tip: display:inline-block is also useful - +1
float both elements left and adjust there widths accordingly.
Related
Please, i need some help here. 2 days i can't solve this elementary task. I'm new to the web design and may be this is easy but i just can't understand, why when i use align:left/right or position:absolute for the child divs – main div just disapaer... I want aside bar to the left, tabs under it, and the main content on the right. Please give me some advise, when i do wrong?
Here's a sample:
<div id="main_container">
<aside id="aside1">
<ul>...</ul>
</aside>
<div class="tabs">
<img src="images/tab1.png"/>
</div>
<div id="container">
<p>...</p>
</div>
</div>
And the CSS:
#main_container {
background: #fff;
border-radius: 5px;
box-shadow: 1px 2px 5px 0px #606060;
-moz-box-shadow: 1px 2px 5px 0px #606060;
-webkit-box-shadow: 1px 2px 5px 0px #606060;
position: relative;
}
#aside1 {
margin: 10px 10px;
background: #c0c0c0;
width: 250px;
}
#container {
width: 680px;
}
.tabs {
}
I know that my Css is not finished but i just confused what should i do or use.. position, float, display...
I appriciate any advices!
position: absolute takes an element out of document flow. So, as far as that container is concerned, that child element no longer exists (at least in the sense it doesn't need to reserve space for its layout).
So if all the child elements of a container are positioned as absolute, then that container has no space which it needs to reserve, and collapses.
One solution would be to give the container a defined height, such as #container { height: 100vh; } which will set the height of the container to 100% of the viewport height.
Another solution would be to use something like the flexbox model.
Floated/absolutely positioned containers are removed from the "flow" of a document. This means that any containers around them don't think they exist anymore and the parent containers won't expand to fit around them. If you're using floats, the way to fix this is to put an element underneath the floated elements that uses clear: both like this:
<div id="main_container">
<aside id="aside1" style="float: left">
<ul>...</ul>
</aside>
<div class="tabs">
<img src="images/tab1.png"/>
</div>
<div id="container">
<p>...</p>
</div>
<div style="clear: both"></div>
</div>
for example the CSS in a other way
#main_container {
width: 500px;
}
#main {
display:table;
}
#aside1 {
display:table-cell;
width: 40%;
background-color:#faf;
}
#container {
display: table-cell;
background-color:#555;
}
first you have to modify the structure:
<div id="main_container">
<div id="main">
<aside id="aside1">
<ul>...</ul>
</aside>
<div id="container">
<p>...</p>
</div>
</div>
<div id="bottom">
<div class="tabs">
<img src="images/tab1.png"/>
</div>
</div>
Then the css. The divs have to be defined with display:inline;
Mike
How i can center div elements horizontally, so when i change the width of the browser, the last div go down with css?
So:
---||||-||||-||||---
--------||||--------
When i write:
<div style="float: left; position: relative; left: 50%;">
<div style="float: left; position: relative; left: -50%;">
<div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
<div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
...
</div>
</div>
Then after a element go down, all div elements go to the left side.
I would recommend using display: inline-block on the elements and then using text-align: center on the container to handle the centering you want:
I cleaned up your HTML but here is the basic HTML formatting with a container class and multiple (as many as you want) block class DIVs:
<div class="container">
<div class="block">Text</div>
<div class="block">Text</div>
<div class="block">Text</div>
</div>
The CSS modifies the display settings of the blocks and the text-alignment of the container:
div.block {
display: inline-block; /* this changes the elements to behave more like inline elements (think <span>s) */
width: 315px;
margin: 10px 0;
height: 340px;
}
div.container {
width: 100%;
text-align: center; /* this is the magic that centers the elements */
}
I put together a small demo that should help demonstrate this method: JSFIDDLE
Be Aware: a small 'quirk' exists with the display: inline-block CSS. it causes a small amount of space to occur between the elements. This can be removed multiple ways, my preferred methods being either using comments or wrapping the closing tags of the DIVs. (the issue is caused by the return/spaces between the elements in the HTML):
<div class="container">
<div class="block">Text</div><!--
--><div class="block">Text</div><!--
--><div class="block">Text</div>
</div>
<div class="container">
<div class="block">Text</div
><div class="block">Text</div
><div class="block">Text</div>
</div>
reference for the quirk behavior
Create a container <div> that is 100% of a given area. Then set each <div>'s width inside the container to be a % and float: left;. They'll stack next to each other until they do not fit and will break to the next line.
.container {
width: 100%;
}
.three {
width: 33%;
min-width: 225px;
float: left;
border: 1px solid black;
}
<div class="container">
<div class="three">
<p>Something</p>
</div>
<div class="three">
<p>Something</p>
</div>
<div class="three">
<p>Something</p>
</div>
</div>
Run the snippet.
You could use media queries to write different css code for different sizes:
Media Queries
There are some answers to a similar question already, but this one has a twist.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 grey">
<div class="wrapper">
<div class="info">(i)</div>
<div class="text"><div class="labeled">This is a long text</div></div>
<div class="icon">[$]</div>
</div>
</div>
<div class="col-xs-12 col-sm-9 green">
Content
</div>
</div>
So I need three divs, aligned in one line at all conditions - info, text, icon - with two divs on the sides having fixed h/w, and one in the middle taking only as much space, as
either it needs, and not more
or is available for it, cutting the context with overflow:hidden
Here is the fiddle http://jsfiddle.net/L7tmt5w1/3/
Here are my mad skills in sketching ideas http://imgur.com/tF0HkD2
For those, who want to feel my pain, you may also try re-ordering the divs - text, icon, info - when the screen size goes mobile (bootstrap's col-xs-)
You can use the display: table-cell; method for this situation:
.wrapper {
display: table;
text-align: right;
width: 100%;
}
.info {
width: 20px;
height: 20px;
display: table-cell;
background-color: #005ea8;
color: #fff;
}
.icon {
width: 20px;
height: 20px;
display: table-cell;
background-color: #eb690b;
color: #fff;
}
.text {
display: table-cell;
background-color: #ccc;
width: auto;
}
This mimics the table display properties and keeps all the children of .wrapper inline and the middle one "elastic" as it has no defined width. You can also remove the floats.
http://jsfiddle.net/L7tmt5w1/7/
maybe this solution will help you DEMO
<aside class="panel">
...
</aside>
<div class="content">
...
</div>
.content {
overflow: hidden;
border: 1px solid;
}
.panel {
float: right;
width: 200px;
border: 1px solid;
}
You can try this http://jsfiddle.net/L7tmt5w1/3/
Remember: If you want to float an element to the right, it must be the first element. For example:
<div style="float:right"></div>
<div style="float:left"></div>
AND DIV's are already block elements, so you don't have to add display:block to a DIV-element
I don't know if this is what you want: jsfiddle
if not content on "text" no div... if too much content it's hidden
(but you can add
overflow:auto
to the text div for scroll bars
I have a div tag, that contains images. The default seems to align images flush bottom, assuming different vertically sized images. How do I change the code, such that I get the images to align flush top?
Here is the complete HTML code.
CSS
#page {
position: relative;
padding: 0px 0px 0px 0px;
float: left;
border: none;
}
.divPortfolioImageRowFirst
{
display: table-row;
}
.divPortfolioImageCol1 {
vertical-align: top;
}
HTML
<div id="page">
<div>
<div id="divProductLogos">
<div class='divPortfolioImageRowFirst'>
<div class='divPortfolioImageCol1' style='line-height: 78px' id="divProductLogos_1">
<img style='margin-left: 0px;' src="./images/portfolio/ProductLogos_1.png"/>
<img style='margin-left: 15px;' src="./images/portfolio/ProductLogos_2.png"/>
</div>
</div>
</div>
</div>
</div>
The addition of "vertical-align: top;" and "line-height: 78px;" did not do the trick.
What did I forget / not do?
I think you want something like the following:
The HTML:
<div id="divProductLogos">
<div class='divPortfolioImageRowFirst'>
<div class='divPortfolioImageCol1'>
<img src="http://placekitten.com/150/200" />
<img src="http://placekitten.com/150/250" />
</div>
</div>
</div>
and the CSS:
.divPortfolioImageRowFirst {
border: 2px dotted gray;
padding: 10px;
}
.divPortfolioImageCol1 {
border: 1px dotted gray;
}
.divPortfolioImageCol1 img {
vertical-align: top;
}
Originally, you had too many floats affecting the layout, and that was causing some problems.
You could also use CSS table cells depending on other design considerations.
Demo fiddle: http://jsfiddle.net/audetwebdesign/9fhCS/
About the Vertical-align Property
The vertical-align property is not inherited, so it as to be applied to the inline elements that need to be adjusted. Specifying vertical-align on the parent container will not affect the child elements.
Reference: http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align
First, valign isn't a valid property, you should use vertical-align: top;
You will also need to set line-height to the height of the tallest image.
This is what I'm trying to achieve
http://i.stack.imgur.com/e9xZa.jpg
I tried this
jsfiddle.net/RUSm3/
but as you can see the date overlaps on the image.
So I added left:215px for the date
jsfiddle.net/9aw29/
It looks good but perhaps I don't have an image. How can I get the date back to the far left? I'm trying to achieve this without php.
If you have a div like this
<div class="container">
<div class="date">today</div>
</div>
with this css fragment your date div will be positioned to the bottom right of it's container.
.container {
position:relative;
width: 100px;
height: 180px;
border: solid 1px black;
}
.date {
bottom:10px;
position:absolute;
right:10px;
}
You can verify it working here
I'm not sure what your markup is, but the easiest solution would be to have the heading, text and date all in one div (inside .entry), and float the image to the left if it's there. The date would be positioned as you have already done in your example. When there is no image, the entire div will move flush left.
<div class="entry">
<img [...] />
<div>
<h2>Heading</h2>
<p>Entry text</p>
<p class="date">[Date]</p>
</div>
</div>
Here is what I came up with and will probably be a good jumping-off point for you. In short, wrap the two text areas in their own divs, and wrap them in a parent div. Float the parent div to the right and make it's position something other than static. If the position is static, you cannot use the position: absolute attribute with it's children divs.
<style type="text/css">
div.entry{
float: left;
position: relative;
width: 40%;
}
img.left{
float: left;
}
div.right{
float: right;
display: inline;
position: absolute;
height: 100%;
width: 50%;
}
div.topRight{
}
div.bottomRight{
position: absolute;
bottom: 0px;
}
</style>
<div class="entry">
<img class="left" src="http://www.google.com/logos/2010/halloween10-ires.gif"/>
<div class="right">
<div class="topRight">
Some stuff
</div>
<div class="bottomRight">
Some other stuff
</div>
</div>
</div>