Align div left and right - html

In the codes below, I have two <div> tags. I want to align one <div> to the left and the other to the right, with the same height and width. Please help me to do this.
<div id="imgShow">
<panel>
<img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server" />
<div id="ScrollImg" style="position:relative;width:900px; height:330px;overflow: scroll; top: 3px; left: -1px;left:auto">
<canvas id = "drawing" height="1500" width="1200" >
<p>Canvas not supported</p>
</canvas>
</div>
</panel>
</div>
<div id="divComplete" style="position:relative;width:100px; height:330px;overflow: scroll; top: 3px; right: -1px;right:auto"></div>

Set the floats for each div with CSS: example
.left { width:50%; float:left; height:200px; background:red;}
.right { width:50%; float: right; height:200px; background: blue;}

Try below code:
Demo
<div id="imgShow" style="width:50%; height:330px;overflow: scroll;float:left;">
<panel>
<img class = "hidden" id="orginal" alt = "Goofy pic of me" runat="server" />
<div id="ScrollImg">
<canvas id = "drawing" height="1500" width="1200" >
<p>Canvas not supported</p>
</canvas>
</div>
</panel>
</div>
<div id="divComplete" style="width:50%; height:330px;overflow: scroll;">Canvas not supported</div>

You should use floats:
<style>
#imgShow, #divComplete{
float:left;
width:50%;
}
</style>
If you want both at different widths, simply separate the css selectors and add the desired width.
PS: Avoid using inline CSS unless you need to, transfer these to a separate CSS file and include it in the head section

You can use twitter bootstrap css for styling your divs. Simply addclass="col-xs-6" to each div. Remember class="col-xs-12" is the full width that the div can take based on the width of the parent container. Using -xs- instead of -md- shrinks the div upon resize instead of knocking them down. If you want margins simply add change them to col-xs-5s then add a col-xs-2 div in between. It's also good practice to use parent divs with container-fluid and row classes

Related

Image not staying inside div when window is large

I have an image which needs to be in a particular location, so I made a div in the place where I need it to be and added an img tag inside it, however although the img tag is inside the div tag the image goes into the bottom right corner of the page. This does not happen when the browser window is small.
CSS:
#teamimg {
width:10%;
height:50px;
background-color:blue;
overflow: auto;
float:left;
}
HTML:
<div id="teamimg">
<img src="Images/picture.png" alt="Image" height="18" width="20" class="itemImg" style="float:left">
</div>
Set overflow:hidden on the #teamimg rule, then you can put the image as a background-image with background-size:cover;. :)

How to center multiple div tags when they are variable width?

I've seen some other posts on this but even using their method on my code doesn't seem to be working for me. What am I doing wrong when trying to center these divs?
This example works fine for me (taken from another SO post).
But this one (which is my code) doesn't behave the same and isn't centered properly.
here is my code that is also in my JSFiddle
.pdf-pageimage-container {
display: block;
margin: 0px auto;
border: 1px solid #EEE;
}
<div class="pdf-pageimage-container" style="position:relative;width:612px;height:792px;">
<img style="width:612px;height:792px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:792px;height:612px;">
<img style="width:792px;height:612px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:612px;height:792px;">
<img style="width:612px;height:792px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:792px;height:612px;">
<img style="width:792px;height:612px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:612px;height:792px;">
<img style="width:612px;height:792px;" />
<div>
<div class="pdf-pageimage-container" style="position:relative;width:812px;height:792px;">
<img style="width:812px;height:792px;" />
<div>
you are not ending div tags.
<img>
can work without "/"
and to align horizontally in center use
<div align="center" class="pdf-pageimage-container" style="position:relative;width:792px;height:612px;"></div>
Your HTML is incorrect. You are opening <div> tags but not closing them with </div>, so you are opening lots of nesting div elements.
You can place them in a wrapper div with a fixed width and then center each of them with auto margin.
Let's say that the wrapper has an ID wrapper and the sub-elements all have the class child. In that case you can for example set the following in your CSS
#wrapper{
width: 800px;
}
.child{
margin: 0 auto;
}
First off I would close the endings of the "div" tags like so just to stay valid with your code.
I'll assume that these divs will stack on top of each other so add this to your "pdf-pageimage-container" css class:
.pdf-pageimage-container {
clear : both;
}
If you want the divs to float next to each other one after another you could use this instead
.pdf-pageimage-container {
float : left;
}
Hope this helps.

How can we remove space from bottom of box when we use image with width 100% in it

How can we remove space from bottom of box when we use image with width 100% in it
<div class="midVideo"><img src="images/videoImg.png" alt="" /></div>
.midVideo{
width:487px;
display:inline-block;
border-radius:10px;
overflow:hidden;
border:solid 12px #630400;
background:#003;
}
.midVideo img, .midVideo iframe{
width:100%;
}
.midVideo img {
display: block;
}
Add display block property to image
Images are replaced elements. These are treated much alike inline elements - so they are placed onto the baseline of the parent element. The space below is reserved for letters which excess the height like pqg and so on. Since images don't need this space, you just need to define display:block on the image to remove it.
Simple way is
<img style="height: 100%;" src="images/videoImg.png" alt="" />
Hard way is
<div class="midVideo">
<img style="[b]<? $img_size = getimagesize('images/videoImg.png'); if ($img_size[0]>$img_size[1]) echo 'width'; else echo 'height'; ?>[/b]: 100%;" src="images/videoImg.png" />
</div>

CSS height doesn't modify image

When I try to assign a height to my <div> that contains an <img>, it’s not modified, just moved.
.banner #dornierenvoj {
left:-95px;
bottom:-90px;
height:-100px;!important
position: absolute;
}
<div id="mapplane">
<img src="templates/protostar/images/planeminiature.png" />
<div id="dornierenvoj">
<img src="templates/protostar/images/dornierenvoj.png" />
</div>
</div>
First there is no negative height or width in css !
Second U can use this code to give that image height :
.banner #dornierenvoj img {
height:100px;
}
That's because the css points to the div, not the image.
you have 2 options:
1: add a class to the image
.bannerImage {height:30px;}
<img class="bannerImage" src="pic.png">
define it in the css
#dornierenvoj img {height:30px}
<div id="dornierenvoj"><img src="pic.png"></div>
the code inside the {} will work on all images inside the div dornierenvoj.
use this :
<img src=""templates/protostar/images/planeminiature.png" width="400" height="400">
THIS IS AN EXAMPLE of width and height

html div settings to restrict inner div width

I have the following setup
<div id="outerDiv" style="width:100%;">
<div id="innerDiv">
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
The width of the outerDiv can change based on browser view-port. Is there a way to restrict the width on the innerDiv just by using a style attribute, such that it overrides the included image width (800 in this example). Currently the image spans beyond the viewport and I would like the div/browser to shrink the image to the inner-div-size.
Am looking for something like:
<div id="outerDiv" style="width:100%;">
<div id="innerDiv" style="attribute:xxx;" or something similar>
<center>
<a href="http:/..." title="..">
<img src="http://...jpg" width="800" height="xxx" alt="..">
</a>
</center>
</div>
<div>
Please note that : the innerDiv is rendering 'variable' data coming from a stored parameter for instance. I only have control on the style on the innerDiv to make sure that things like 'center' or 'width' on the innerHtml does not go beyond what the outerDiv is setting. I have tried to use 'max-width' on the outer-div, but that didn't seem to work (I am not an expert on html/css - so I could have done it incorrectly).
Many thanks for all your help !
max-width property can help you.
Remove width attribute from img tag and write additional css code:
<style>
#innerDiv { text-align: center; width: 800px; }
#innerDiv a > img { display: inline-block; max-width: 100%; }
</style>
ComFreak has the complete answer.
Remove the center tag and instead add some css. Also add an id to that image if you want to target only that image specifically as far as its size.
#innerDiv {
max-width:800px;
margin:0 auto;}
img {/*use 'img#idOfimage' instead of 'img' if you end up adding an id to image */
width:100%;
height:0 auto;}
This should take care of it. You can put the css in a style tag in the header or better yet in a separate css file.
Don't use center tag. It defentinatly is outdated. Instead use margin: 0 auto; That will center the content. And use the max-width property for the innerDiv id. This is a great reference source. http://www.w3schools.com/cssref/pr_dim_max-width.asp