Floating buttons within a block alongside an image

As a beginner, I'm seeking help to identify where I may be going wrong. My goal is to have the "Dealer" and "Private Party" buttons appear next to the iPhone picture on the left-hand side of the image. Thank you in advance for any assistance.

HTML:

  <div class="recent-trade-img" style="margin:10px 0 0 0">
  <input class="sell-type" value="Dealer" type="button"><input class="sell-type" value="Private Party" type="button><a href="prices_iPhone_2G_16GB_ATT.html"><img src="images/specs_iPhone_2G.jpg" width="186" height="182" alt=""></a>
  </div>
  <div class="name">
  <a href="prices_iPhone_2G_16GB_ATT.html">iPhone 2G<br> 16GB AT&amp;T</a>
  </div>

CSS:

.sell-type  { 
background-color: #ffffff;
border: 1px solid #ccc;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset;
color: #0564BC;
/*text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 1px 2px rgba(0, 0, 0, 0.2);*/
border-radius: 4px 4px 4px 4px;
cursor: pointer;
font-weight: bold;
padding: 5px 0;
/*width:130px;
height:58px;*/
width:100px;
height:48px;
margin: 4px;
font-size: 14px;
background-size:70% !important;

}

.sell-type:hover  {
border-color: #0564BC;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 3px rgba(0, 0, 0, 0.1);
color: #36658f;
}
htmlcsscss-float

Answer №1

To organize the layout, simply group the 2 buttons in a div and place the image in its own div

<Div class="button_group">
 Buttons go here....
</div>

<div class="image_container">
   Image tag goes here...
</div>

Adjust your css for these classes accordingly

.button_group{float:left; width:120px; height:80px;}
.image_container{float:left; width:150px; height:100px;}

Feel free to customize the size of each element by changing the width and height values. Experiment with the code to fit your needs.

Best of luck! :)

Answer №2

Check out the code below and customize it to suit your requirements

HTML:

<div class="awesome wrapper">
  <img src="the galaxy.jpg" class="i-picture">

  <div class="inner_wrapper">
    <div class="btn_deal">dealer</div
    <div class="btn_private_party">private party</div>
  </div>

</div>

CSS

.awesome.wrapper{
display:inline-block
}

.i-picture{
float:left;
display:block;
width:150px;
height:150px;
}

.inner_wrapper{
float:left;
display:block
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using AngularJS to retrieve information from a PHP script

As a beginner in AngularJS, I am currently working on retrieving data from a PHP file that interacts with a database and displays the results in JSON format. However, when testing this functionality, I am facing difficulties as it is not displaying any dat ...

javascriptphphtmlangularjs

How to Properly Adjust the Material UI CircularProgress Size

Is there a way to display the Material UI CircularProgress component at a size that nearly fills the parent div, which has an unknown size? Ideally, I want the size to be around 0.8 * min(parent_height, parent_width). I've experimented with adjusting ...

htmlcssreactjsmaterial-uiprogress-bar

Aligment issues in columns on Bootstrap 5

I currently have a layout using Bootstrap 5 with multiple rows and columns. My goal is to have the columns aligned within each row, but I am experiencing issues where some borders are not lining up correctly with the columns. .VI-border { border-t ...

htmlcssbootstrap-5

"Utilizing jQuery to achieve vertical center alignment within a div

Attempting to vertically center a div within another div that has 100% dimensions is proving to be a bit challenging. The code I have written seems to work but occasionally triggers an odd bug. This is the snippet of code in question: var window_height = ...

jqueryhtmlcentervertical-alignmentcentering

Can the parent's :active pseudo class be overridden?

I'm struggling with changing the color of a div when clicked while preventing its parent's pseudo-class from triggering. Here is the markup I have: <div class="parent"> I should change my color to green when clicked <div class="elem ...

jqueryhtmlcss

Using Flexbox to create collapsible elements that maintain a consistent width

Within my flexbox setup, I am utilizing disclosure elements such as <details> and <summary>. Is there a way to ensure that when the details are collapsed, they occupy the same width as when they are expanded? Currently, there is a fluctuation i ...

htmlcssflexboxwidth

[SCSS] I am experiencing difficulties with loading fonts on my machine/browser, while they are functioning normally on other devices

When using relative paths, fonts may not load properly. However, absolute paths seem to work without any issues. //styles.scss @font-face { font-family: 'Roboto-Bold'; src: url('../fonts/Roboto-Bold.ttf'); } @font-face { font-fam ...

cssreactjssassvite

The CSS property col visibility:collapse is ineffective on the Chrome browser

I am attempting to conceal some columns in my HTML code by using MDN colgroup and col elements, and manipulating the styles of the columns. The <td> containing the text 'visible' is visible in all browsers (which is good), but the one with ...

cssgoogle-chromehtml-tablecolgroup

Creating a CSS section that expands with a minimum height of 100% and perfectly centers its content vertically

Seeking an elegant solution for having sections with a minimum height of 100% (window height). The div should expand to fit the content if it exceeds 100%, and vertically center the content within the div if it is smaller. I have managed to find a simple ...

htmlcssvertical-alignmentexpandable

What does "SPAN CLASS="SKYPE_C2C_FREE_TEXT_SPAN" refer to?

While browsing a website, I noticed the use of this HTML class surrounding customer address information entered in a form. I am curious about the purpose of these tags - perhaps they trigger a specific behavior on Skype? Unfortunately, I couldn't find ...

htmlcssskype

Reducing Bootstrap Navigation Bar with a scrolling logo

Is there a way to make the fixed navbar shrink 50% when it starts scrolling? I've only come across text navbars, but I'm looking for one with a logo. Any suggestions would be greatly helpful. You can access the css and html from that link. ...

csstwitter-bootstrapnavbar

Unlock the Power of JavaScript: Understanding Multidimensional Input Field Array Indexing

Here is a sample HTML form with multidimensional input fields. <tr> <td><input name="diameter[0][top]" type="text" id="diameter_top0" size="5" class="diameter" /></td> <td><input name="diameter[0][bottom]" type="te ...

javascripthtmlarrays

Difficulty filling height with Bootstrap 4 flex-grow

I am in need of creating a layout with a header div at the top (that can be filled with content), a footer div at the bottom, and a middle div with an adaptable height to fill the entire screen. Check out my code below: <div class="container-fluid p-0 ...

htmlcssbootstrap-4

Establishing the sizing of an element across various breakpoints

I'm having trouble setting up varying widths based on different breakpoints. For instance, the code below will be used for all breakpoints: <nav class="navbar-nav w-75 ml-md-4"> ... a select element </nav> But how do I enable w-100 for s ...

cssbootstrap-4

What's the reason for it displaying [object Object] instead of its normal

I'm having an issue trying to retrieve data from Firebase. Every time I attempt to read, I keep getting [object Object]. It's unclear whether the problem lies in my reading method or if there's a database issue. I've experimented with u ...

javascriptjqueryhtmlfirebasefirebase-realtime-database

To style the input box, apply the CSS properties "filter: alpha(opacity=70);" and "background-image: url(image.png);"

Individual functionality for both the form and css has been achieved, but when trying to implement them together, they do not work as intended. This integration is specifically for a windows sidebar gadget. Here is the structure of the form: <form nam ...

javascriptcssfilterbackground-imageopacity

Issues with the HTML <div> tag placement in the center

I am encountering an issue while creating a basic HTML website. I want the image and white fields to fill the entire screen (100% width), but they seem to be constrained by some margin on both sides. As a beginner in web development, I believe the solution ...

htmlcsswidthmargin

IE causes link_to :remote => :true to malfunction

I'm facing an issue with remote links in Internet Explorer, and it's crucial to resolve it promptly as the deadline is today. The problem arises when we utilize AJAX to initiate a remote call to an action and evaluate the JavaScript returned. Wh ...

ruby-on-railsajaxhtmlprototype

What are some strategies to enhance the performance of JavaScript pagination to ensure it functions effectively for varying numbers of pages?

Currently, I am working on building Vanilla Javascript Pagination. I encountered an issue where the pagination seems to work flawlessly only when there are precisely 7 pages. If the page count exceeds or falls below 7, some minor bugs start to surface. I h ...

javascripthtmlcss

Can a Dashcode Webkit Web app be transformed into traditional HTML and CSS?

I have developed a blog using Dashcode, incorporating HTML, CSS, and Javascript to pull data from an xml file. It's pretty simple... My perspective on this is: 1. JavaScript should be compatible with all browsers (with some variations). 2. I may need ...

javascripthtmlwebkitcssdashcode