Is there a way to align two different elements next to each other on a webpage? See an example of what I'm referring to : http://prntscr.com/c1e8pn Here is what I'm attempting to achieve : http://prntscr.com/c1e8v2
Is there a way to align two different elements next to each other on a webpage? See an example of what I'm referring to : http://prntscr.com/c1e8pn Here is what I'm attempting to achieve : http://prntscr.com/c1e8v2
I'm not entirely certain about your question, but it seems like you may be missing the display: inline-block; tag. This tag allows you to specify the width and height of elements while keeping them in the same row.
Let me provide an example using your code.
.main-content{
display: inline-block;
width: 68%;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #DDD;
}
.content{
width: 60%;
padding: 1%;
margin: 1% 1% 1% 0;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
float: left;
}
.side-box{
display: inline-block;
width: 22%;
float: right;
background-color: #EEE;
}<div class="main-content">
<article class="content">
<header class="main-header">
<h1>NEW! Free Stuff Section!</h1>
</header>
<footer class="sub-footer">
<p>We have added a new free stuff section!</p>
</footer>
<content>
<p>bla bla bla bla bla bla bla bla bla</p>
</content>
</article>
</div>
<aside class="side-box">
<article>
<h1>Side Box Header</h1>
<p>Side Box Text</p>
</article>
</aside>I hope this information is helpful!
Check out this code snippet.
.content{
width: 79%;
float:left;
padding: 5px;
}
.sidebar{
width: 19%;
float:left;
padding: 5px;
}
.new{
background-color: orange;
margin:10px;
padding: 15px;
border-radius: 4px;
color: #fff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<div class="content">
<div class="new">
<h2>Facebook</h2>
<p>Facebook is a for-profit corporation and online social networking service based in Menlo Park, California, United States.</p>
</div>
<div class="new">
<h2>Twitter</h2>
<p>Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets". Registered users can read and post tweets, but those who are unregistered can only read them.</p>
</div>
<div class="new">
<h2>LinkedIn</h2>
<p>LinkedIn is a business-oriented social networking service. Founded on December 14, 2002, and launched on May 5, 2003, it is mainly used for professional networking.</p>
</div>
</div>
<div class="sidebar">
<div class="new">
<h2>Google</h2>
<p>Google is an American multinational technology company specializing in Internet-related services and products that include online advertising technologies, search, cloud computing, and software</p>
</div>
<div class="new">
<h2>Yahoo</h2>
<p>Yahoo Inc. is an American multinational technology company headquartered in Sunnyvale, California. It is globally known for its Web portal, search engine Yahoo! Search, and related services, including Yahoo! Directory, Yahoo! Mail, Yahoo!</p>
</div>
</div>
</body>
</html>I am looking to modify the code below so that instead of pushing data to the selected panel, it pushes data to a table inside the panel. The new data should be added to a new row every time the arrow is clicked. <html> <head> <title>Bo ...
I recently encountered an issue while attempting to create a mouseover effect that would display a larger image when hovering over a smaller default image. The problem arose when the larger image started flickering uncontrollably upon hover. Check out the ...
Hello everyone, I'm currently working on a login form with jQuery validation to ensure that the user ID and password entered are valid. So far, this is what I have implemented: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/l ...
I have utilized the Vuetify data table component to define the table shown below. My current challenge involves figuring out how to make the first row of the table appear in bold. Specifically, I want the text of the first item record to be bold. Any ass ...
Exploring the creation of a website where users can freely post content has been an interesting journey. One challenge I'm currently facing is enabling users to upload files sequentially and send them as a multi-part request in ajax. Unfortunately, I ...
I've been trying to get a Tumblr icon to display in the upper-right corner of my HTML-based page, but all I see when I open it in a browser is a white box with a gray outline. The code I'm using for the image is: <img style="float: right; mar ...
Here is an example of my HTML code: <div id="slideClick"> <div style="padding: 0; margin: 0 auto; width: 100%; height: 100%; text-align: center; border: 1px solid blue;"> <span class="sideMsg">MESSAGES</span> </d ...
I find it frustrating to always manually enter fixed widths for divs depending on the number of letters in a li tag. <div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Information</a>&l ...
My website has the code snippet below: let txt_com = document.querySelector(".text_user"); let num_com_user = document.querySelector(".massage_for_user"); txt_com.addEventListener("click", function() { if (this.classList.contains("num_com_user")) { ...
I'm in the process of developing a product customization tool that allows users to choose colors for various parts of a bag and see a live preview, similar to this: My current setup involves using transparent PNG images layered on top of each other a ...
Looking to rotate content on tablet and mobile devices without affecting desktop view. Attempted solutions: rotate(90deg) -> Didn't work as it rotated even on desktop @media screen and (orientation:lanscape) -> Also didn't work as it ...
I'm having trouble getting my Apps Script-based HTML to include any scripts. My doGet function for the HtmlService is working fine: function doGet() { return HtmlService.createHtmlOutputFromFile('myhtmlfilename'); } Regardless of whether ...
Is it possible to override inline CSS using JavaScript with compatibility for IE6? I came across a pure CSS solution, but unfortunately it doesn't work in IE. http://www.sitepoint.com/blogs/2009/05/27/override-inline-css/ <div class="block"> ...
The website I'm currently working on is stipz.50webs.com. p.s. HOME functionality is not active at the moment. Having successfully implemented the onhover and onmouseout features, my next goal is to enhance the navigation effects for each div/img so ...
I recently started working on a PHP/AJAX website and I'm contemplating the best approach to "only include the content". Should I incorporate if statements in my header and footer scripts to check for a "ContentOnly" get parameter? Then, append that p ...
Currently, I am using two different stylesheets - Bootstrap 4.0 and Materialize 4.0. My challenge is selecting specific selectors from both stylesheets but overriding conflicting styles. For instance, I would like to apply the header navigation style fro ...
I'm currently developing a boxing game that allows users to select from three different boxers. The computer will then choose one of the remaining two boxers that the user did not select. https://jsfiddle.net/1ehpxto6/ My HTML code looks like this: ...
Issue with Pseudo class before not displaying background colour in Safari browser To view the code, please visit the following link here HTML <div id='test'> <p>Test </p> </div> CSS #test { position: relative; per ...
Can the file size of an uploading file be determined using Javascript without requiring an ActiveX object? The solution should work across all web browsers. ...
Here is the markup I am working with: <table> <tr> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></td> <td><input type="radio" name="radio"></ ...