I have this particular section:
<section class="socialIcons">
<div class="fbIcon"></div>
<div class="fbIcon"></div>
<div class="fbIcon"></div>
<div class="someClass">
<h2>text</h2>
</div>
</section>
My goal is to have all the elements in one row, spaced out with the social icons on the left and the someClass div on the right side. I've tried setting the width and height of the fb icons to 100%, but they disappear. How can I achieve this layout?
.fbIcon {
background: url(http://i.imgur.com/tLHwYNw.png) no-repeat;
height: 80px;
width: 80px;
float: left;
margin-right: 20px;
margin-top: 12px;
cursor: pointer;
display:inline-block;
}
.someClass {
width: 50%;
height: 90px;
background: #ff7043;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
float: right;
text-align: center;
cursor: pointer;
margin-top: 5px;
}
.someClass > h2 {
color: #ffffff;
margin: auto;
font-size: 24px;
vertical-align: middle;
line-height: 90px;
}
Alternatively, you can also see another demo by clicking here
.fbIcon {
width: 14%;
float: left;
margin-right: 2%;
margin-top: 12px;
cursor: pointer;
display: inline-block;
}
.someClass {
width: 50%;
height: 90px;
background: #ff7043;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
float: right;
text-align: center;
cursor: pointer;
margin-top: 5px;
}
.someClass > h2 {
color: #ffffff;
margin: auto;
font-size: 24px;
vertical-align: middle;
line-height: 90px;
}
My work may not be perfect, but feel free to tidy it up: https://jsfiddle.net/JTBennett/Lbkyzcav/4/
I hope this meets your requirements, although it's a bit unclear based on your explanation...
I suggest avoiding absolute positioning, but if you choose to use it, here is an example:
position:absolute; right:0;
If you set a height for a wrapper and float it right with your styled wrapper inside, the code will be cleaner - using inherent position is usually better in my opinion.
Now, all that's left is to determine the correct heights and widths.
Apologies, my search has yielded many results, but none that directly address my specific issue. It appears that there is a proliferation of div-height problems on this platform. :-( Here is the layout I am working with for testing purposes: <!DOCTYPE ...
I'm currently building a web page that can detect button presses on an Xbox controller and display a boolean value based on the pressed button. Right now, I have successfully managed to detect when a controller is connected and show it as a string. Ho ...
I am working on creating a dynamic Search List for the Search Bar that changes color when hovered over and gets selected when clicked from the displayed item list. searchlist.jsx: import React from 'react' import { FaSearch } from 'react-ic ...
Is there a way to make only my div transparent using the opacity property while keeping the font normal? I cannot assign a separate class or id to the content as it is dynamically generated. Also, using background: rgba(); is not an option for me. {opacit ...
Hey there, I'm currently facing an issue with my CSS file that contains all the styling for about ten different pages. The problem lies in the fact that the CSS classes are not being applied as they should be. Specifically, I have p tags within the ...
For my grocery list application created with Angular 4, I need the user to click on an item and have it added to the bookmarked section. Despite using jQuery to access the innerHTML of the li when hovered over, the value keeps returning as "undefined." In ...
After encountering an issue with my background image appearing cloudy and stretched on retina-ready devices, I am seeking the best approach to replace it with a high-resolution version on such devices. Should I utilize media queries, incorporate JavaScri ...
I have a div on my webpage that dynamically generates time and date content every half a second using the JavaScript function below: function ClockAndCalendar() { // Function logic here } var getTimeDateCalendar = setInterval(ClockAndCalendar, 500); Th ...
I have a question that I hope is clear enough! On my webpage, there is a div at the top that I want to move to the bottom when I scroll and reach the end of the page. Hopefully, you understand what I'm trying to achieve! If anyone has any ideas, I&ap ...
Creating a versatile JavaScript dialog class is my current project using JQuery to generate centered div-popups on the screen. So far, implementation across common browsers has been straightforward. The challenge arises when dealing with mobile platforms ...
Is it possible to utilize 2 objects, each with a single line? https://i.sstatic.net/402Qp.png Currently, I have set the color like this: .chart-series-line {-fx-stroke: #ff0099; }, which changes the color of both lines. However, I need the lines to have d ...
When I added the video for the background, it only appears at the top of the page. However, I want it to be visible as the rest of the page is scrolled. <div class="hero"> <video autoplay loop muted plays-inline class="back-video&qu ...
I'm looking to implement reCAPTCHA on a form. After registering, I obtained the necessary keys. <form> <input type="text" name="name" /> <input type="email" name="email" /> <textarea name="message"></textarea&g ...
How can I reload the specific content of a browser tab? I am looking for a solution that does not rely solely on jQuery (although I prefer it if there are more options available). Here is what I need: I have a page with many links to other pages (the fo ...
As someone who isn't an expert in any specific coding language, I have a knack for piecing things together to make them work. However, my current challenge is stretching my technical abilities a bit too far. Here's what I'm trying to achieve ...
I have a challenge with creating a vertical layout of stacked divs. Everything was going smoothly until I encountered the #resume div, which stubbornly stays hidden beneath the table-containing div above it. Despite trying various adjustments to float and ...
After examining the code provided, I've almost achieved the desired outcome. The only issue is that there are no scroll bars present. I have identified two potential solutions: 1) One option is to remove the !doctype declaration at the beginning of t ...
I am facing an issue with my script while using React and Next.js in my pages/_app.js file. The code snippet is as follows: import axios from "axios"; import { $ } from "jquery"; import App from "next/app"; import Router from ...
I am attempting to design a slideshow with small images evenly distributed horizontally on each slide. I came across an intriguing technique on css-tricks.com and a very straightforward working example, but I have not been successful in replicating it. Be ...
I've been struggling to align my table header and content properly, as shown in the image. I want the header aligned to the right while keeping the rest of the content aligned to the left of the header. Is there a way to achieve this using only CSS wi ...