Styling a component next to another using CSS

Question

Styling a component next to another using CSS

Struggling with a simple question here. I'm experimenting with HTML and CSS, trying to create a page with a central content box flanked by two arrow images on each side. While the concept isn't too difficult, I'm running into issues with using position: absolute; as resizing the window causes the elements to misbehave.

Here's my HTML:

<div id= "left_side">
  <a href=""><img id="leftArrow" src="images/lefta.png"/></a>
</div>

<div id="right_side">
  <a href=""><img id="rightArrow" src="images/righta.png"/></a>
</div>

<div id="content">
  <p>something</p>
  <p>more something</p>
</div>

And my CSS is structured like this:

#left_side {
  border: black solid 1px;
  position: absolute;
  left: 0;
  width: 10em;
  text-align: center;
  margin: 65px;
  border-radius: 8px 8px 8px 8px;
}

#right_side {
  border: black solid 1px;
  position: absolute;
  right: 0;
  width: 10em;
  text-align: center;
  margin: 65px 210px 0px 0px ;
  border-radius: 8px 8px 8px 8px;
}

#content {
  background-color: white;
  width: 500px;
  margin: 15px 320px 15px 320px;
  padding: 30px;
  border:5px;
  border-radius: 8px 8px 8px 8px;
}

I'm looking for advice on how to make the side images/buttons always stay relative to the content box regardless of screen size. Would nesting them in a bigger box be the best approach, or am I heading in the wrong direction altogether? Apologies for the basic question, positioning has always been a challenging aspect for me as a beginner.

Appreciate any help you can offer.

html css position

Answer 1

Answer №1

My preferred method for centering content involves using two wrapper divs without the need for absolute positioning in CSS:

.couter
{
    position: relative;
    left: 50%;
    float: left;
}
.cinner
{
    position: relative;
    left: -50%;
}

To implement this, I structure my HTML like so:

<div class="couter">
    <div class="cinner">
        <div id= "left_side">
          <a href=""><img id="leftArrow" src="images/lefta.png"/></a>
        </div>

        <div id="right_side">
          <a href=""><img id="rightArrow" src="images/righta.png"/></a>
        </div>

        <div id="content">
          <p>something</p>
          <p>more something</p>
        </div>
    </div>
</div>

Answer 2

My preferred method for centering content involves using two wrapper divs without the need for absolute positioning in CSS:

.couter
{
    position: relative;
    left: 50%;
    float: left;
}
.cinner
{
    position: relative;
    left: -50%;
}

To implement this, I structure my HTML like so:

<div class="couter">
    <div class="cinner">
        <div id= "left_side">
          <a href=""><img id="leftArrow" src="images/lefta.png"/></a>
        </div>

        <div id="right_side">
          <a href=""><img id="rightArrow" src="images/righta.png"/></a>
        </div>

        <div id="content">
          <p>something</p>
          <p>more something</p>
        </div>
    </div>
</div>

Answer 3

Answer №2

To allow the content to grow along with the page expansion, one method is as follows:

You can find a working example here: http://jsfiddle.net/VKBTy/

Additionally, I suggest utilizing a container box with position:relative for better control.

Answer 4

To allow the content to grow along with the page expansion, one method is as follows:

You can find a working example here: http://jsfiddle.net/VKBTy/

Additionally, I suggest utilizing a container box with position:relative for better control.

Answer 5

Answer №3

Here is a jsfiddle link where you can find a potential solution:

http://jsfiddle.net/simonweston/MuTEn/

HTML code snippet:

<div id= "left_side">
LEFT
</div>
<div id="content">
  <p>something</p>
  <p>more something</p>
</div>
<div id="right_side">
  RIGHT
</div>

CSS code snippet:

#left_side {
  border: black solid 1px;
  float: left;
  width: 10em;
  text-align: center;
  border-radius: 8px 8px 8px 8px;
}

#right_side {
  border: black solid 1px;
  float: left;
  width: 10em;
  text-align: center;
  border-radius: 8px 8px 8px 8px;
}

#content {
  background-color: red;
  float: left;
  width: 100px;
  border: 5px;
  border-radius: 8px 8px 8px 8px;
}

Answer 6

Here is a jsfiddle link where you can find a potential solution:

http://jsfiddle.net/simonweston/MuTEn/

HTML code snippet:

<div id= "left_side">
LEFT
</div>
<div id="content">
  <p>something</p>
  <p>more something</p>
</div>
<div id="right_side">
  RIGHT
</div>

CSS code snippet:

#left_side {
  border: black solid 1px;
  float: left;
  width: 10em;
  text-align: center;
  border-radius: 8px 8px 8px 8px;
}

#right_side {
  border: black solid 1px;
  float: left;
  width: 10em;
  text-align: center;
  border-radius: 8px 8px 8px 8px;
}

#content {
  background-color: red;
  float: left;
  width: 100px;
  border: 5px;
  border-radius: 8px 8px 8px 8px;
}

Answer 7

Answer №4

If you're looking for a simpler way to achieve the layout you want, I have made some modifications to your CSS:

#left_side {float:left;width:100px;padding:10px;}
#right_side {float:left;width:100px;padding:10px;}
#content {width:500px;float:left;background:blue;}
.clear{clear:both;}

Additionally, I adjusted your HTML as follows:

<div id= "left_side">
  <a href=""><img id="leftArrow" src="images/lefta.png"/></a>
</div>

<div id="content">
  <p>something</p>
  <p>more something</p>
</div>

<div id="right_side">
  <a href=""><img id="rightArrow" src="images/righta.png"/></a>
</div>

<div class="clear"></div>

Feel free to use this code to validate if it meets your requirements.

Answer 8

If you're looking for a simpler way to achieve the layout you want, I have made some modifications to your CSS:

#left_side {float:left;width:100px;padding:10px;}
#right_side {float:left;width:100px;padding:10px;}
#content {width:500px;float:left;background:blue;}
.clear{clear:both;}

Additionally, I adjusted your HTML as follows:

<div id= "left_side">
  <a href=""><img id="leftArrow" src="images/lefta.png"/></a>
</div>

<div id="content">
  <p>something</p>
  <p>more something</p>
</div>

<div id="right_side">
  <a href=""><img id="rightArrow" src="images/righta.png"/></a>
</div>

<div class="clear"></div>

Feel free to use this code to validate if it meets your requirements.

Styling a component next to another using CSS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

In a React application, the input field unexpectedly loses focus after typing just one character

Styling elements using the nth-child selector in JavaScript

Is the navigation bar offset causing an issue?

Fixing the issue of list styles not displaying properly when using CSS3 columns in Webkit can be achieved by

Searching for non-existent PHP index with $_POST superglobal

Harvesting data from an HTML document using BeautifulSoup and Python

Component rendering based on conditions is not working properly when using Next.js, especially on the initial load

How to hide text within a contenteditable element

Tips for creating a responsive image with a gradient overlay

Enhancing Transparency of WMS Layers in OpenLayers

I keep receiving unexpected security alerts in Firefox without any specific cause

The lengthy string is not breaking into separate lines as expected in Internet Explorer

The dropdown login form is malfunctioning on my Wordpress website

Wrapping Text around an Image in HTML

Is it feasible to send a GET form to two separate views using two buttons?

Displaying feedback messages and redirecting in Flask may result in the response being visible in the developer tools, but

Issues with the performance of input range sliders in iOS Safari is causing frustration

Is it possible to execute HTML5/JS code without relying on the client side?

Enhancing user interfaces with jQuery by updating DOM elements

Tips on introducing a random pattern into a Javascript gaming experience