The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

Reply to this topicStart new topic
> Question about HTML Side by Side containers
Jack Stone Design
post Jul 31 2018, 04:04 AM
Post #1

Group: Members
Posts: 1
Joined: 31-July 18
Member No.: 26,680

Hello, im relatively new to html so bear with me, if i sound weird/use incorrect terms im sorry.

Im a graphic designer experimenting with creating my own site, basically as a hobby.

Ive started by adding 3 personal images. When you hover the image with mouse, it displays text. However, i cannot get the 3 images to display side by side, they go vertically.

without the code that makes the text appear when hovering, i can make them go side by side, but when i add the hover code it wont work. as the code is somewhat lengthy to add the hover effect, i dont know where to put in how to make them go side by side (if that makes sense).

how do i get the 3 separate containers/divs to go side by side? i have also edited the container width to 33% but wouldnt work.

Here is the code ive copied, obviously with my own image descriptions locations etc.

Any help would be appreciated, thanks.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
post Jul 31 2018, 08:05 PM
Post #2

Don't like donuts. Don't do MySpace.

Group: WDG Moderators
Posts: 18,132
Joined: 9-August 06
Member No.: 6

You could float all DIV.container left. Provided you don't use that class for something you don't want floated - in that case come up with a new class just for this. Then fix it up with a little margin between the DIVs maybe. This method will cause the image DIVs that don't fit in the window to drop down and float to the left below the first image. This is usually a good thing as it lets the page adapt to the user's viewport.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:


- Lo-Fi Version Time is now: 17th February 2019 - 04:31 AM