Im having trouble getting some divs to float and align properly.
I have two divs that contain images that are working properly, and I need to add two more, with images that behave the in the same manner.
I tried to use the same code to make the current divs work properly, but they automatically seem to remain allocate themselves within the same div as the other images that I'm trying to use.
//Here is the Code.
<div id="products">
<img src="cbdog.jpg" style="float: left; padding-bottom: 25px;">
<br>
<br>
</div>
<div id="otherProducts">
<br>
<br>
<img src="gelog.jpg" style="float: left;">
</div>
Im trying to this is inline obvisouly.
So I tried to do.
<div id="products">
<img src="cbdog.jpg" style="float: left; padding-bottom: 25px;">
<br>
<br>
</div>
<div id="otherProducts">
<br>
<br>
<img src="gelog.jpg" style="float: left;">
</div>
<div id="cbdGel">
<br>
<br>
<img src="gelog.jpg" style="float: left;">
</div>
And Basically replicate the previous formatting to get the same result, but the resulting image just places itself with the same div as the top image.
Any help would be greatly appreciated. Thanks in advance.
~zaklikescode
If i understand correctly, you want two divs side by side? if so. You'll need to assign a width and position either inline using the style="" attribute or in css
#products, #otherproducts { float:left; width:48%; position:absolute; }
if not, let me know. I'll see what i can do.
Related
float: center dose not even exist
I tried a lot of methods, yet non of them worked.
I search for a solution, and all of them were align left or right with the text on the opposite side. But there was not align center with text in both sides... So, a solution, please. Preferably writing the style in the img tag...
This is my html so far:
<img style="float: center; margin: 0px 15px 15px 0px;" src="image.png"/>
So there is no float: center. However you could use float:left; on all elements. It will float left in order and if there all from a small size they will be placed next to eachother like this.
<p style="float:left;">Left</p>
<img style="float:left;" src="#">
<p style="float:left;">Right</p>
But then a again this method is really tricky and there are much better ways to structure you code and layout. Flex-boxes for example. A bit harder to understand, but once you'll get it it's very helpfull.
/*This external css is just for show*/
div{
text-align: center;
border: solid 1px black;
}
<!-- This is the minimum code you'll need -->
<div style="display:flex;">
<div style="flex:1;"> <p>BlaBla</p> </div>
<div style="flex:1;"> <img src="#"> </div>
<div style="flex:1;"> <p>and some more blabla</p> </div>
</div>
This question already has answers here:
How to make a stable two column layout in HTML/CSS
(6 answers)
Closed 4 months ago.
I'm trying to make a simple two-column layout in HTML/CSS; after consulting some resources, I'm still getting the two divs that should be side-by-side rendering as one below the other.
<div id="columns" style="width: 100%;">
<div id="left" style="float: left; width: 60%;">
<button id="testBtn">show</button>
<div id="output" style="white-space: pre-line">
Content goes here
</div>
<div>
<div id="right" style="float: left; width: 40%;">
<div id="input">
input displayed here
</div>
</div>
</div>
These are some of the links I've consulted:
Simple two column html layout without using tables
https://www.w3schools.com/howto/howto_css_two_columns.asp
I've tried several variations, but so far I'm not getting a two-column layout. When I set the "input" div to "float:right", it appeared indented to the right but was still below the "output" div instead of beside it. Am I missing something?
Your HTML is invalid. Instead of a closing </div> tag for #left, you have an opening <div> tag.
Try this:
<div id="left" style="float: left; width: 60%;">
/* content goes here... */
</div>
Here is a fiddle demonstrating the modified markup: https://jsfiddle.net/djc87tLc/
Add display:inline-block; box-sizing:border-box; in both the divs and it will work.
display:inline-block;
This will keep the elements inline and box-sizing:border-box; will keep the element's width to your defined width by including any padding or border inside it.
Hope this helps.
A client asked me to fix their image grid CSS. While I thought they just screwed around to much with the HTML for it to function properly it seems the problem is a bit more technical then I initially thought.
Because I cannot think of the right keywords google isn't much help either.
My problem is this:
the banners are png's. And as you might figure, the bottom 3x1 banner should align to the bottom of the other 3x1 banner.
This isn't really a problem if I'm working with columns (in this case 2), but I that's not the case. Since sometimes an image takes on a width of multiple columns, there is no clear line in between.
HTML:
<div class="page-banners grid-container">
<div class="grid12-6 banner">
<img src="3x1.png" />
</div>
<div class="grid12-6 banner">
<img src="3x2.png" />
</div>
<div class="grid12-6 banner">
<img src="3x1.png" />
</div>
</div>
CSS:
.grid12-6 {
width: 48%;
}
.grid12-1, .grid12-2, .grid12-3, .grid12-4, .grid12-5, .grid12-6, .grid12-7, .grid12-8, .grid12-9, .grid12-10, .grid12-11, .grid12-12, .grid-full, .grid-col2-sidebar, .grid-col2-main {
display: inline;
float: left;
margin-left: 1%;
margin-right: 1%;
}
Changing
float:left;
to
display:inline-block;
doesn't do the trick, it just makes the first 3x1 banner vertically align to the baseline of 3x2.
The answer is probably fairly simple. But I've spend way to much time staring at it.
Below is an example (made in excel) for the page could 'look' like if all the images were inserted. Each color as a placeholder for a banner.
Basically, this is what I want, but without the javascript.
http://desandro.github.io/masonry/demos/basic-multi-column.html
It should be enough to put the images together into one column, havent tried it
<div class="page-banners grid-container">
<div class="grid12-6 banner">
<img src="3x1.png" />
<img src="3x1.png" />
</div>
<div class="grid12-6 banner">
<img src="3x2.png" />
</div>
</div>
you might need to adjust the space between them
It's hard to say as you are not giving us the real example of use but try setting the height on the banners as the lowest heigt and the inages will overflow naturaly like so:
.banner{height:100px}
http://fiddle.jshell.net/gndLuqqy/
I am trying to make a messaging app. I have found some good css from metroui.org.ua.
I want my app to look like this.
This is the code I have written.
<div >
<div style="display: inline; padding-left: 150px; width: 50px; float: left;">
Hi Username,
<br />
Company
</div>
<div style="padding-left: 50px; padding-right: 200px; display: inline-block">
<div class="balloon right">
<div class="padding20">
Balloon is represent to create information or dialog UI. You can put inside any
of elements.
</div>
</div>
</div>
</div>
It works but when I put <br/> tag for company it messes up.
Also I am not getting the balloon right to display correctly.
Maybe try putting Username and company into paragraph tags?
Like:
<p>Username</p>
<p>Company</p>
Try it and see if it works
In CSS, how do I achieve the following layout?
xxxxxxxxxxxxxR1xxxxxxxxxxxxx
xxxxxxxxxxxxxR1xxxxxxxxxxxxx
xxxxxxxxxxxxxR1xxxxxxxxxxxxx
xR2.1x xxxxxxxxxR2.1xxxxxx
xR2.1x xxxxxxxxxR2.2xxxxxx
xR2.1x xxxxxxxxxR2.2xxxxxx
xxxxxxxxxxxxxR3xxxxxxxxxxxxx
xxxxxxxxxxxxxR3xxxxxxxxxxxxx
xxxxxxxxxxxxxR3xxxxxxxxxxxxx
R2.1 is an image that I want to go to the left, and R2.2 is a div that I want to go to the right.
If R2.2 was a paragraph, it would be easy - I could just use float:left on R2.1 - but the fact that it is a div seems to mess things up.
I've tried using <img style="float:left;"> and <div style="float:right">, together and separately, but they don't seem to combine well.
What am I doing wrong?
There is no need to use float:right on the right side, just use float:left and margin:
<div>r1</div>
<img style="float:left; width:50px; height:50px;" title="r2.1" />
<div style="margin-left:50px;">r2.2</div>
<div style="clear:both;">r3</div>
Is there any reason you can't put the image inside the second div? That would sort it out:
<div id="r1" style="height:100px; background-color:#eff;">r1r1r1r1r1r1r1r1r1r1</div>
<div id="r2" style="height:100px; background-color:#efe;">r2r2r2r2r2r2r2r2r2r2
<div id="image" style="width:160px;height:100px;background-color:#ff8;float:left">
</div>
</div>
<div id="r3" style="height:100px; background-color:#fee;">r3r3r3r3r3r3r3r3r3r3</div>
http://jsfiddle.net/WP6bc/1/
Try:
<div style="margin-left: [width of picture]">
The floats should work as expected. Make sure you add a clear:both to the R3 div, so it knows it should start beneath the floating divs, and that the left/right divs have the correct widths so they aren't pushed to a new line. Example:
<div>r1</div>
<img style="float:left;" alt="r2.1" />
<div style="float:right;">r2.2</div>
<div style="clear:both;">r3</div>
http://jsfiddle.net/wHm8n/