|
CSS - Footer, Float And Padding Issues :(
Hi all,
Been playing about with some CSS for a simple e-comm site. Mockup here. There seems to be a few issues though between IE/FF. Thats all I've been able to test on so far though. The site validates properly as far as I can tell so that doesn't seem to be a problem. In Firefox, the left hand bottom sidebox overflows the page (the footer doesn't go below it). In IE it seems to be fine. In IE, the padding on the right hand side of the main content header box is not the same as the left side. Also, the main left bullet list is royally arsed up. At the moment, I can't spot any more issues than that. As I continue development and start to add more features, then I will probably crop up with more issues. The HTML for the site is here. The CSS for the site is here. Suggestions on how to fix it would be much appreciated. Cheers, Computer Similar TutorialsI'm trying to get 2 div's to be side-by-side and taking up the full width. The one on the right should be able to resize automatically to accomodate the user name ("Logged in as: ..."). The one on the left will display a random tip, which might carry over onto the next line. I tried to pad both div's for style's sake, but only the one on the right is padding in Firefox. If I float the left one to the left, then it pad's, but doesn't look right anymore. I've attached an image of the problem. The one on the top is Firefox, on the bottom is IE. As you can see, the bottom borders don't line up in Firefox because of the padding issue. Here's my code: Code: <div class="login"> <span class="text">Logged in as: <strong>USERNAME</strong> | <strong><a href="/store/index.php?logout=true">Logout</a></strong></span> </div> <div class="tip"> <span class="text"><strong>Random Tip: </strong></span> </div> And my CSS: Code:
.login {
background: #fff;
float: right;
text-align: right;
padding: 4px 10px 4px 10px;
border-left: #666666 1px dashed;
border-bottom: #666666 1px dashed;
}
.tip {
background: #fff;
height: auto;
text-align: left;
padding: 4px 10px 4px 10px;
border-bottom: #666666 1px dashed;
}
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #666666;
line-height: 160%;
}
on my site http://www.fasttracksites.com/ i have the right column set to a width that has my padding subtracted from it so that it will sit off of the left border, and off of the right side, the overall div for the center of the page is 800px and everything is based off of this, the file containing my css is http://www.fasttracksites.com/stylesheets/main.css The problem is that even though the padding is set, the right column still sits on the borders, if anyone can help me fix this, i would greatly appreciate it Firstly, excuse my title, I couldn't think of a better way to put it . Now to the problem. In my layout I have a floated object, and text that flows around it, I can pad the text away from this floated object by using margins on the floated object. But I have created a class for <p> that I want to be padded further, and if I add padding-left to p.quote (the class) it makes no difference because the padding is simply going behind the float... As rubbish as that explanation was, I expect someone will pick up on what I'm going on about. How can I have some text indented (padded) further away from the float than other ? Thanks in advance. Hey all... I'm doing some testing in Firefox, and I've encountered a problem. Code: <div style="background-color: #FF9801; height: 33px; width: 99px; text-align: center; display: inline; padding-top: 8px;">Help</div> My intention here is to create a box that is 99px high, 33px wide, and with the text in the middle. In IE6, this appears to be fine. However, when testing it out in FF, I don't get the spacing that I want. Here's the kicker: When I add the float element, (float: left), it comes out the way I want it to. But it does seem to add a bit of whitespace above and to the left of it. I don't want the whitespace! Can anyone help with a compromise that will work in both browsers? My CSS usage has been pretty light until up to this issue. Thanks in advance! Hey. First post on here, so hopefully you lot are very helpful I've been asked to make a site for someone I know, and I've done the design, made most of it in CSS and a little php for navigation alerations. The URL for the website is: (URL address blocked: See forum rules) The problem that I'm seeming to have, is that in IE7 the footer only takes the value of the #bottom_container height, and ignores the #left and #right that are inside this container. Meaning that, the footer rides up to the middle of the page, as shown: [IMG](URL address blocked: See forum rules)[/IMG] Does anyone know how to solve this? It's performing well in Safari and Firefox, and even IE6! Just not the new one. I know it's something to do with the height of the botom container, but each page is going to have different amounts of content, so I cant set a height for all of them. Thanks very much! Nick. Hi All, Im giving my site a slight update, but have encountered a strange IE problem. Saying that i have nothing but problems with IE some days with both 6 and 7. The menu system seems to work fine in Safari and firefox, however in IE the last tab seems to go to the next line. I think it may be a problem with the padding/margin however thats only a guess. Any help would be appreciated. Thanks Here is the link: http://www.michaelpalmer.info/new/index.php Here is the full CSS code: http://www.michaelpalmer.info/new/css/style.css Here is the CSS code for the menu system: css Code: Original - css Code /************ pageMenu ************/ #pageMenu { background: repeat url(../images/pageLayout/pageMenu.gif); width:780px; margin: 0px auto; border-left: 1px solid #000000; border-right: 1px solid #000000; } .menuButton { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/blackDot.gif) bottom repeat-x; color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .menuCurrent { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/menuCurrent.gif); color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .menuCurrentLeft { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/menuCurrentLeft.gif); color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .menuCurrentRight { /*background: #fff url(RightCorner.gif) bottom repeat;*/ width:130px; font-weight:bold; float: left; margin: 0px auto; background: url(../images/pageLayout/menuCurrentRight.gif); color: #ffffff; padding-bottom: 2px; padding-top: 4px; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* Hides from IE-mac \*/ * html .clearfix {height: 1%;} /* End hide from IE-mac */ .menuCurrentLeft a { color: #000000; text-decoration: none; } menuCurrentLeft a:hover { color: #000000; text-decoration: none; } .menuCurrentRight a { color: #000000; text-decoration: none; } menuCurrentRight a:hover { color: #000000; text-decoration: none; } .menuCurrent a { color: #000000; text-decoration: none; } menuCurrent a:hover { color: #000000; text-decoration: none; } .menuButton a { color: #ffffff; text-decoration: none; } .menuButton a:hover { color: #dba549; text-decoration: none; } /************ pageMenu ************/ /************ pageMenu ************/ Heres the code for the html html Code: Original - html Code <!-- pageMenu --> <div class="clearfix" id="pageMenu"> <div class="menuButton"> <a href="index.php?page=1">Home</a></div> <div class="menuButton"> <a href="index.php?page=2">About</a></div> <div class="menuButton"> <a href="index.php?page=3">Contact</a></div> <div class="menuButton"> <a href="index.php?page=4">Downloads</a></div> <div class="menuButton"> <a href="index.php?page=5">Photos</a></div> <div class="menuButton"><img alt="." src="images/pageLayout/invisible.gif"/></div> </div> <!-- pageMenu --> <div class="clearfix" id="pageMenu"> <div class="menuButton"> <a href="index.php?page=1">Home</a></div> <div class="menuButton"> <a href="index.php?page=2">About</a></div> <div class="menuButton"> <a href="index.php?page=3">Contact</a></div> <div class="menuButton"> <a href="index.php?page=4">Downloads</a></div> <div class="menuButton"> <a href="index.php?page=5">Photos</a></div> <div class="menuButton"><img alt="." src="images/pageLayout/invisible.gif"/></div> </div> The site can be viewed he http://oharenoise.org/new/ I am having issues with padding on this newly revised website, specifically in the left column division. For example, I'd like the "Special Information" heading to have larger padding above it & less padding below. No matter what values I enter into the padding attributes, nothing changes. I'm having the same problem with the "Featured Publications" too, further down the page. Hi. I'm trying to update a site to use CSS instead of tables and I'm having some issues with the top banner and the lovely IEs. Basically, IE6 seems to be acknowledging some padding/margins for my "banner" div and both IE6 and 7 have some extra spacing below my H1/logo image that Firefox/Opera properly display. I put up a screen shot of Firefox (far left), IE7 (middle), and IE6 (upper right) showing the discrepancies at "hxxp://ns1.zivix.com/~mbydalek/sample/Screenshot.png" Here are the specific problems that I am trying to fix: 1) The floated H1 (background green) should have 0 spacing at the bottom, yet IE6/7 both show some extra green indicating some extra spacing 2) IE6 has the banner a few pixels off to the right and actually a couple pixels taller than it's supposed to be, which is the height of the floated right image. I put the code and css up at: hxxp://ns1.zivix.com/~mbydalek/sample/admin.html hxxp://ns1.zivix.com/~mbydalek/sample/css/master.css Any help would be greatly appreciated! Regards, Mike * On a side note, how the heck do you post URLs (with or without bbcode) on these forums? Any url I try (even if I copy/paste directly from the help) gets replaced with a "(URL address blocked: See forum rules)" Well, I don't see anything in the rules and I've read/searched through them now for 20 mins and am not having any luck. Okay this is still the same page I posted about but a little different problem as I fixed the other one. In IE my wrapper is extending way beyond 770px to about 991px. You can see this in the image below. It shows the green border way beyond where the main content ends to the right. Edited to add that I figured out my problem with the image aligning to the right. I had 2px padding set all round on the container box for it All the content looks correct in FF (suprise suprise). My CSS: Code:
#wrapper {
text-align: left;
margin: 0px auto;
width: 770px;
}
/* column container */
#colcont {
float: left;
width: 550px;
}
/* columns */
#lcol {
float: left;
width: 180px;
max-width: 180px;
vertical-align: top;
}
#mcol {
float: right;
width: 366px;
vertical-align: top;
}
#rcol {
float: right;
width: 210px;
max-width: 210px;
margin-left: 10px;
vertical-align: top;
}
/* login box */
.metro_wrap {
width: 200px;
margin-left: 10px;
}
.login_top {
width: 200px;
height: 260px;
background: #54B043 url(/theme/Metrocom/login_top.gif) top right no-repeat;
}
.metrologin {
background: #54B043 url(/theme/Metrocom/login_bottom.gif) no-repeat;
height: 588px;
color: #FFFFFF;
vertical-align: top;
}
.loginbar {
background: #54B043;
padding: 4px;
color: #FFFFFF;
font-weight: bold;
height: 34px;
}
HTML -- This is the DIV that holds the image Code: <div class="metro_wrap">
<div class="login_top"></div>
<div class="loginbar">
Welcome to www.tdsmetro.net.<br />
Please sign in.
</div>
<div class="metrologin">
<?if($msg) {?>
<span class="autherr">$msg</span>
<?}?>
<div class="login">
<form class="nopad" action="/login.php" method="post" onsubmit="return(ck_login(this.user));">
<input class="login" type="text" name="user" maxlength="50" size="24" />
<br />
<strong>User Name</strong> (joe.smith@tds.net)<br /><br />
<input class="login" type="password" name="pass" maxlength="30" size="24" />
<br />
<strong>Password</strong><br /><br />
<div align="center">
<input class="login" type="submit" value="Sign In" name="submit" />
</div>
</form>
</div>
<br />
</div>
</div>
Here is the way that the divs are laid out. I didn't want to put evertyhing because it'd be huge. Code:
<div id="wrapper">
...some nav stuff...
<div id="colcont">
<div class="animetro_news">
some more stuff
</div>
<!-- Left Column -->
<div id="lcol">left column</div>
<!-- Middle Column -->
<div id="mcol">middle</div>
</div> <!-- end colcont-->
<!-- Right Column -->
<div id="rcol">right column</div>
</div> <!-- end wrapper -->
Nevermind guys, I figured it out. I looked back at an old thread I posted about a year ago with the same issue. The fix was to add vertical-align: top; to the flt_rt img css. ========================================== This issue is affecting both FF (3) and IE (6)...I haven't tested in another browser yet. I just inherited this site and am in the process of converting it from a table layout to valid css. EVerything's going pretty well with the exception of my right column images. An approximately 5px gap is appearing so the images do not fit flush. I have looked at this so long that I can't see where it's happening and would appreciate another set of eyes. This version of the site is on a private test server, so I've attached screenshots. In each screenshot you will see the gap colored in green. In FF it appears below the images, while in IE it's appearing in between. Thanks in advance! Here is my css: Code:
@charset "UTF-8";
body {
background-color: #191919;
margin-top: 5%;
}
.heading {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
color: #000000;
padding-left: 30px;
padding-top: 30px;
text-align: left;
}
.heading2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #B3DB10;
display: block;
width: 525px;
padding-left: 30px;
line-height: 140%;
padding-top: 10px;
}
.style2 {
color: #FFFFFF;
background-color: #7d990b;
display: block;
position: static;
padding-left: 8.5px;
height: 18px;
padding-top: 5.5px;
}.maintext {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 140%;
padding-top: 0px;
padding-left: 35px;
padding-right: 30px;
color: #333333;
}
.column1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 140%;
padding-top: 0px;
padding-left: 35px;
padding-right: 30px;
color: #333333;
}
.column2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 140%;
padding-top: 0px;
padding-left: 0px;
padding-right: 30px;
color: #333333;
}
.heading3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #999999;
display: block;
width: 525px;
padding-left: 30px;
line-height: 140%;
padding-top: 10px;
}
.maintext2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 200%;
padding-top: 30px;
padding-left: 30px;
padding-right: 30px;
color: #CCCCCC;
}
.heading4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
color: #CCCCCC;
display: block;
width: 525px;
padding-left: 30px;
line-height: 140%;
padding-top: 0px;
}
HTML (with some content removed) Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Home - .</title>
<link href="style1.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style3 {color: #B3DB10}
-->
#container {
width: 925px;
height: 600px;
text-align: center;
margin: 0 auto;
padding: 0;
}
#nav {
float: left;
width: 200px;
height: 425px;
background-color: #b3db10;
}
#nav ul {
margin: 27px 0 0 0;
padding: 0;
}
#orion_logo {
border: none;
}
#rcol {
float: right;
height: 425px;
width: 725px;
}
#heading {
float: left;
height: 47px;
width: 475px;
background-color: #ababab;
padding: 53px 0px 0px 30px;
margin: 0;
font: 20px normal;
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-align: left;
}
#maintext {
clear: left;
float: left;
background-color: #FFFFFF;
height: 325px;
width: 505px;
text-align: left;
}
#flt_rt {
float: right;
width: 220px;
height: 425px;
background-color: green;
padding: 0;
margin: 0;
}
#flt_rt img {
padding: 0;
margin: 0;
}
#heading2 {
clear: both;
height: 155px;
width: 725px;
background-color: #000000;
text-align: left;
padding-left: 200px;
padding-top: 20px;
}
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="nav">
<a href="http://">
<img src="images/logo.png" width="200" height="100" alt="Orion logo" title="http://www..com" id="orion_logo"/>
</a>
<ul id="MenuBar1" class="MenuBarVertical">
<li><span class="style2"> Home</span> </li>
<li><a href="02.html"> Proven Credibility</a></li>
<li><a href="03.html"> Leading-Edge Products</a> </li>
<li><a href="04.html"> Benefits of the Program</a></li>
<li><a href="05.html"> Benefits of the Products</a></li>
<li><a href="06.html"> Benefits of the Partnership</a></li>
<li><a href="07.html"> Contact</a></li>
<li><a href="http://www.com/login.asp"> Partner Login</a></li>
</ul>
<a href="07.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/apply2.gif',1)"><img src="images/apply1.gif" name="Image4" width="100" height="20" hspace="50" vspace="30" border="0" id="Image4" /></a>
</div> <div id="rcol">
<h1 id="heading">Stake Your Claim in a Billion Dollar Industry!</h1>
<div id="flt_rt">
<img src="images/orion2.jpg" width="220" height="216" alt="" /><img src="images/orion05.jpg" width="220" height="209" alt=""/>
</div>
<div id="maintext">
<p class="maintext">text here<br />T</p>
<p class="maintext">text here</p>
<p class="maintext"><strong></strong>, President and CEO</p>
</div>
</div>
<div id="heading2">
<span class="maintext2">The U.S. Retrofit Market Opportunity:</span>
<span class="heading4"><span class="style3">text<br />
<span class="style3">20.6 billion</span> square feet need to be retrofitted*<br />
<span class="style3">$9.6 billion</span> retrofit market size</span>
<span class="maintext2">*Source: EIA 2003</span>
</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</div> <!-- end container -->
</body>
</html>
Hey y'all. I was hoping someone could help me with some minor margin/padding issues. At one point I knew how to fix this, but I can't for the life of me remember. The site is www (dot) texasarmor (dot) com I like the way the divs are spaced in IE but I don't know how to make IE and Firefox the same. Please help... Also, please if you could, any critiques? Suggestions? Thanks very much. -michael What a giant surprise here but I need some assistance with my CSS Float . In FF, Safari, and IE6 everything displays correctly. However, Opera 9.64 and IE7 / IE8 have major issues. I know there are still a few quirks in my physical XHTML mostly Alt attributes not filled in yet (I'm more worried about full cross browser compatibility). I have eliminated tables for everything possible but have had more problems by removing all of them. Live Site: moo-ving dot com I hate to make everyone type it out sorry. Howdy folks. I'm working on a site right now with a fixed sized menu on the left, and a fluid layout to the right of it. I CANNOT get the h1 header to come up to the top in FF!!! Here's the page, and here's the CSS. I found a link on how to do it thru bonrouge's site...but it's not quite working how i want it to. Thanks! so, i have a form with rounded corners, which i've had no problems with in the past. the problem here is that the background color behind the box with the rounded corners is going to be user-generated and the box itself can change in width. my solution was to float the corners left and right and have the rest filled in the middle. works perfectly in firefox, giving the middle element an automatic width with margins on either side equal to the size of the corner images. however, IE decided to add in extra space between the 3 elements. ive tried giving the elements a display:inline-block property, but it didnt help. Code:
#petition_letter {
width: 330px;
margin: 25px auto 0;
}
.lettertop .left, .lettertop .right {
display: block;
width: 15px;
height: 15px;
background-image: url(lettertop.gif);
background-repeat: no-repeat;
}
.letterbottom .left, .letterbottom .right {
display: block;
width: 15px;
height: 40px;
background-image: url(letterbottom.gif);
background-repeat: no-repeat;
}
.letterbottom .right { width: 40px; }
.lettertop .left { float: left; background-position: top left; }
.lettertop .right { float: right; background-position: top right; }
.letterbottom .left { float: left; background-position: bottom left; }
.letterbottom .right { float: right; background-position: bottom right; }
.lettertop .middle, .letterbottom .middle {
display: block;
height: 15px;
margin: 0 15px;
background: #fff;
}
.letterbottom .middle {
padding-bottom: 25px;
padding-left: 15px;
margin-right: 40px;
}
.lettercontent {
border-bottom: 1px solid #fff;
background-color: #fff;
padding: 0px 30px;
font-size: 12px;
}
<div id="petition_letter">
<div class="lettertop">
<span class="left"></span>
<span class="right"></span>
<span class="middle"></span>
</div>
<div class="lettercontent textColor">
blah blah
</div>
<div class="letterbottom">
<span class="left"></span>
<span class="right"></span>
<span class="middle"></span>
</div>
</div>
I have a container containing two other divs. One is to be a left floating menu, and the other is to be a right floating content area. However, when I place these divs in a container that contains a background, the container won't expand as information is placed in the menu or the content area. My code looks like this. HTML: Code: <div class="blog-container"> <div class="blog-menu"> Some Random Menu </div> <div class="blog-content"> Some Random Content </div> </div> CSS: Code:
.blog-container {
position: relative;
text-align: center;
padding-top:15px;
width: 925px;
background-color: #eeeeee;
}
.blog-menu {
float: left;
width: 120px;
border: 1px solid blue;
}
.blog-content {
float: right;
width: 150px;
border: 1px solid red;
}
I really have no idea why it's doing this. Any help would be greatly appreciated. I have a horizontel list as my menu with a 1px border to the right of each item as a seperator. Each item has 10px padding to the left and right. In all browsers it shows up as expected in the middle of the menu items but in Explorer the border is way closer to the right, almost pushed up against the item to the right. Any help please. Greetings, Basic Layout is: Page-Containter -> Header-Container -> Side-Container -> Content-Container -> Footer-Container Header is normal Side is a Float Left with a width of 250 Content has a left margin of 260 (to allow for the Side-Container) Footer is normal. Pretty basic. In the content area there are more divisions to handle different sections of data. The problem is that in some of the content sections, I need to have dynamically allocated "blocks" of data that form psuedo "columns". I do this by doing a float:left on each of the content blocks. (generally a 250px width) That way if I show 1 or 5, they all snug up next to each other and wrap properly in the browser. Still pretty basic. Until ... drum roll please ... the next section. Since the content is "float:left", it's removed from the layout and the following sections will just "snug up" next to the last content block. I want the section to "clear" the previous content division, but don't really have a clean way to declare the "height" of that division, due to the dynamic nature of the data. Silly Rabbit ... just do a clear:left !! In IE it works fine. In Firefox, the clear:left command is clearing the previous container! (side-container ... aka: left nav bar) First question: Which browser is right? is IE right and the clear:left should be contained to it's own division? or is firefox right and the clear:left checks all float:left regardless of division? Second question: If IE is right, what is the fix ... if Firefox is right, how should I actually structure this? |
|||||||