We Keep Coding

How to fit text properly inside a div with overflow: hidden?

I'm having problems with the text inside a div with overflow: hidden.
The div is a dropdown that shows another div containing an image and text. The dropdown works with javascript editing height. There is also a problem; once in a while when I click on the drop button, it takes two clicks for it to work, I don't know why.
<div class="dropDiv">
<strong class="divTitle">Title</strong>
<div class="dropDownBtn" onclick="dropDown()"></div>
<br>
<div class="heroInfoDiv">
<img height="100%" width="20%" src="Media/image/img.png">
<div class="textHolder">If this text is too long, it dissapears.</div>
</div>
</div>
At first I tried having the div holding the text as a p-element, but changing it to div with any kind of CSS on it didn't work. What I want to happen is for the text to obey the rules of like any normal container, where it breaks lines automatically.
Here is a jsFiddle showing what is happening:
https://jsfiddle.net/56oypcbj/5/

Remove the float: left form your .textHolder class.
.textHolder {
padding: 0px;
}

How to ignore anchor if button is clicked within the anchor element

I have a situation where clicking on an image will direct the user to a certain link, but pressing a button that is shown within an image will run a javascript method instead. However, I cannot prevent the page from redirecting to the certain link when the button is pressed (the javascript method is also run when the button is clicked).
I have found out that button cannot be nested within an anchor element, and tried to wrap the button within a form as well, but no luck.
Does anyone know a way around such problem?
the basic logic in code looks like this
<a href="an item description link">
<img src="an item image"/>
<form style="display: inline" action="html_form_action.asp" method="get">
<button type="button" id="add-btn" class="add-cart" onclick="quick_add()">+</button>
</form>
</a>
Thanks in advance for any help!

A straightforward way that validates would be just superimposing the button over the link. This requires the link and the button to be in the same containing element, and for both of them to use position: absolute:
HTML
<div class="box">
<a href="http://example.com">
<img src="http://placehold.it/300x200">
</a>
<button>AAAAA</button>
</div>
CSS
.box {
box-sizing: content-box;
width: 300px;
height: 200px;
border: thin solid black;
}
.box > a {
display: block;
position: absolute;
}
.box > button {
position: absolute;
}
See it in action on CodePen: http://codepen.io/millimoose/pen/avYLjQ
The button will automatically be stacked over the preceding link. (This is specified behaviour.) And it will handle clicks before they can be passed to elements underneath is.
That said, this solution has a few downsides. You'll have to give a fixed size to the container; it can't be sized automatically to fit its contents, because its contents are outside of the rendering flow. This also means they won't automatically fill their parent box unless you set their size explicitly again.

How do you move two images to the left and right in a div element?

I am using HTML, and I am trying to make a part of a webpage where I have a textbox in the center of the screen and five images surrounding the textbox.
I am able to place three images above the box, but when I try to place an image to the left and to the right of the textbox, the images seem to be "stuck" in the center of the page. All this is in a div element.

Easiest way to do this is with grid system. In example if you use Bootstrap grid system you can do it like this:
<div class="wrapper">
<div class="row">
<div class="col-md-4"><img src="source" alt="something" ></div>
<div class="col-md-4">Textbox</div>
<div class="col-md-4"><img src="source" alt="something" ></div>
</div>
You can also do it without grid system like Gerasimos answer.

Try using the CSS position property if this doesn't work try entering this code in your style sheet:
#left-image { position: absolute; left: 10px}
#right-image { position: absolute; right: 10px}

Can you display divs instead of images in Galleria?

I have simple gallery that I show like so
<a href="img/graph_asset_view/center_image_1.jpg">
<img src="img/graph_asset_view/center_image_1.jpg" />
</a>
Is it possible to show div instead of image on center? I tried to do something like this but it didn't work. It showed the image like even I didn't change anything.
<div style="width: 300px; height: 300px; background: blue;">
<img src="img/graph_asset_view/center_image_1.jpg" />
</a>

Please try below code :-
<div style="width: 300px; height: 300px; background:
blue;cursor:pointer;"
onclick="document.location='img/graph_asset_view/center_image_1.jpg'">
<img src="img/graph_asset_view/center_image_1.jpg" />
</div>

I assume you are asking to do the following, placing a inside of the anchor link instead of the images. Correct? If so, just do the following:
<a style="display:block" href="http://justinbieber.com">
<div class="xyz" style="min-height:500px;min-width:300px;">My div content here!
</div>
</a>

Use the "layer" property of the image json to display the div. You can set the width and height of the layer the same as the image. So only the overlay will be seen. And it is swipeable! See here for detail: http://galleria.io/docs/references/data/

Trying to make a button in html with javascript

I have never coded before so i dont know much, i watched this youtube video on how to make a js button youtube video
<div style="position:absolute; margin-left:1202px;"
<input type="image" src="images/login.png"
onmouseover="javascript:this.src='images/loginpressed.png';"
onmouseout="javascript:this.src='images/login.png';" />
</div>
i can see that the code works in dreamweaver, but for somereason, others cannot see it on the website

You forgot a > after <div style="position:absolute; margin-left:1202px;". Because of that, the button is now part of your div's declaration.
B.t.w. You can achieve a similar result by using another element than input type=image, like a span or div or an actual link element (a href) and apply some CSS to give it a different background image. For instance:
HTML:
<span class="button" onclick="alert('clicked');">Caption</span>
CSS:
.button {
display: inline-block;
height: 30px;
background-image: url(normalstate.png);
}
.button:hover {
background-image: url(hoverstate.png);
}

It may possible that path to your images not found at other place.